자바 스크립트로 <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);

함수의 끝까지 끝 함수는 다음과 같습니다.

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

먼저 li(필요한대로 ID와 값으로) 생성 한 다음 ul.

자바 스크립트 ::

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