Question

我想动态创建带有复选框的列表。为此我创建了列表项，复选框，动态文本节点。

我的问题是，我想在List项中添加checkbox和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

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 2

您必须动态创建一个复选框，动态创建一个列表项（<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>

Answer 3

我建议使用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'}) )

如何在List项中附加checkbox，textnode

3 个答案: