☰

新規追加方法 に onclick with javascript 質問する

tag-icon • tag-icon javascript html list
新規追加方法 に onclick with javascript 質問する

onclick の関数を使用して、既存の ul にリスト要素を追加するにはどうすればよいでしょうか。このタイプのリストに追加する必要があります...

<ul id="list">
<li id="element1">One</li>
<li id="element2">Two</li>
<li id="element3">Three</li>
</ul>

... ID が「element4」で、その下にテキストが「Four」である別のリスト項目。この機能を試しましたが、機能しません...

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Element 4"));
}

JQuery は分からないので、Javascript のみでお願いします。ありがとうございます!!

ベストアンサー1

要素liに子として を追加していませんul

これを試して

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Four"));
  ul.appendChild(li);
}

idを設定する必要がある場合は、次のように設定します。

li.setAttribute("id", "element4");

これにより、関数は次のようになります

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Four"));
  li.setAttribute("id", "element4"); // added line
  ul.appendChild(li);
  alert(li.id);
}

おすすめ記事