JS createElementの使い方

KK_2024

【index.html】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <script src="index.js" defer></script> 
    <title>Document</title>
</head>
<body>
    <input type="text" id="form" onchange="createInputText()">
    <ul id="parent">parentです。</ul>
    
</body>
</html>

【index.css】

 #parent  {
    background-color: #eee ;
    padding: 10px;
  }
  #blue  {
    background-color: blue;
    padding: 10px;
    color: #fff ;
  }
  li {
    margin: 5px;
  }

【index.js】

function createInputText () {
    var form = document.getElementById("form");
    var area = document.createElement('li');
    area.id = 'blue';
    area.innerHTML = form.value;
    var parent = document.getElementById('parent');
    parent.appendChild(area);
    form.value = '';
  }


この記事が気に入ったらサポートをしてみませんか？