วิธีเพิ่ม new <li> ลงใน <ul> onclick ด้วย javascript

ฉันจะเพิ่มองค์ประกอบรายการใน ul ที่มีอยู่โดยใช้ฟังก์ชันจาก onclick ได้อย่างไร? ฉันต้องการมันเพื่อเพิ่มในรายการประเภทนี้ ...

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

หากคุณต้องการตั้งค่ารหัสคุณสามารถทำได้โดย

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และ voila!

ดังนั้นเพียงแค่เพิ่ม

ul.appendChild(li);

ไปยังจุดสิ้นสุดของฟังก์ชันดังนั้นฟังก์ชันสิ้นสุดจะเป็นดังนี้:

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