如何在列表項中追加複選框textnode

Question

我想動態地用複選框創建一個列表。爲此我動態創建了列表項，複選框，文本節點。

我的問題是，我想追加列表項中的複選框和textnode。這個怎麼做？

腳本：

var name=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue; 
var list = document.createElement("li"); 
var cb = document.createElement("input"); 
cb.type = "checkbox"; 
cb.id = "c1"; 
cb.value = name; 
cb.checked = false; 
var text = document.createTextNode(name); 

身體：

<ul id="list" > 
    </ul> 

我想去做，

<li><input type="checkbox">Tamil</li> 

動態地從JavaScript

。

對於我試圖像，

document.getElementById('list').appendChild(list); 
document.getElementById('list').appendChild(cb); 
document.getElementById('list').appendChild(text); 

但它不是在li追加。

如何正確添加它們？

Answer 1

我會推薦使用jQuery或其他類似的庫。這將有助於確保跨瀏覽器的兼容性，並簡化您的編碼。使用jQuery你可以做這樣的...

// create something, and appendTo something else 
$('<li />').appendTo('body') 
// select something, and append something else to it 
$('li').append($('<input />').attr({type:'checkbox'})) 

Answer 2

var name=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue; 
var list = document.createElement("li"); 
var cb = document.createElement("input"); 
cb.type = "checkbox"; 
cb.id = "c1"; 
cb.value = name; 
cb.checked = false; 
// then 
list.appendChild(cb); 
list.innerHTML+=name;//or if you want,create the textnode 'text' and appendChild again 
var lists=document.getElementById('list'); 
lists.appendChild(list); 

Answer 3

您必須動態地創建一個複選框，創建一個列表項（<li>）動態，追加的複選框<li>和<li>到UL

類似：

var name = "Test"; //or whatever you want, from another textbox for instance 

//Create a new <li> dynamically 
var newLi = document.createElement('li'); 


//Create checkbox dynamically  
var checkBox = cb = document.createElement("input"); 
cb.type = "checkbox"; 
cb.id = "c1"; 
cb.value = name; 
cb.checked = false; 

//Append the checkbox to the li 
newLi.appendChild(cb); 


//Create the text node after the the checkbox 
var text = document.createTextNode(name); 
//Append the text node to the <li> 
newLi.appendChild(text); 

//Append the <li> to the <ul> 
var ul = document.getElementById("test"); 
ul.appendChild(newLi); 

你開始正確的，那麼忘記了創建一個新的<li>