कैसे जावास्क्रिप्ट के साथ नए <li> <ul> onclick जोड़ने के लिए

Question

मैं ऑनक्लिक से फ़ंक्शन का उपयोग करके मौजूदा ul में एक सूची तत्व कैसे जोड़ सकता हूँ? मुझे इस प्रकार की सूची में जोड़ने की आवश्यकता है ...

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

... आईडी "एलिमेंट 4" के साथ एक और सूची आइटम और उसके नीचे टेक्स्ट "फोर"। मैं इस समारोह की कोशिश की, लेकिन यह काम नहीं करता है ...

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

मुझे नहीं पता JQuery इसलिए जावास्क्रिप्ट केवल कृपया। धन्यवाद!!

Answer 1

आपने 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);
}

Answer 2

आप लगभग वहाँ थे:

तुम बस करने के 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);
}

Answer 3

सबसे पहले आपको li(आवश्यक के रूप में आईडी और मूल्य के साथ) बनाना होगा फिर इसे अपने में जोड़ें 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)
}

इस उदाहरण को जांचें जो liतत्व को जोड़ता है ul।