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

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

あなたは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);
}

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

あなただけ追加する必要があるliにulして出来上がり！

だから追加するだけ

ul.appendChild(li);

関数の最後まで、end関数は次のようになります。

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

まず、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)
}

に要素を追加するこの例を確認してください。liul