web-dev-qa-db-ja.com

javascriptを使用して新しい<li>を<ul> onclickに追加する方法

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だけをお願いします。ありがとうございました！！

javascripthtmllist
67
Uni

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);
}
136
gaurav5430

あなたはほとんどそこにいました：

liをulに追加するだけでいいのです！

追加するだけです

ul.appendChild(li);

あなたの関数の終わりまでですので、最後の関数は次のようになります：

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

最初にli（必要に応じてIDと値を使用）を作成し、それをulに追加する必要があります。

Javascript ::

addAnother = function() {
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    var children = ul.children.length + 1
    li.setAttribute("id", "element"+children)
    li.appendChild(document.createTextNode("Element "+children));
    ul.appendChild(li)
}

これを確認してください 例li要素をulに追加します。

8
Lalit Kumar