调用document.createElementById()方法时,传入的参数必须是一个合法的HTML标签。
<ul id="d">
<li>疯狂Java讲义</li>
</ul>
<script type="text/javascript">
var ul=document.getElementById("d");
var ajax=ul.firstChild.nextSibling.cloneNode(false);
ajax.innerHTML="疯狂Ajax讲义";
ul.appendChild(ajax);
</script>
Node cloneNode(boolean deep):复制当前节点。当deep为true时,表示在复制当前节点的同时,复制该节点的全部后代节点;当deep为false时,表示仅复制当前节点。
为列表框、下拉菜单添加选项
<body id="test">
<script>
var a=document.createElement("select");
for(var i=0;i<10;i++)
{
var op=document.createElement("option");
op.innerHTML='新增的选项'+i;
a.appendChild(op);
}
a.size=5;
document.getElementById("test").appendChild(a);
</script>
</body>
defaultSelected:设置默认是否选中该选项。
selected:设置该选项当前是否被选中。
<body id="test">
<script>
var a=document.createElement("select");
a.style.width="200px";
for(var i=0;i<10;i++)
{
var op=new Option('新增的选项'+i,i);
a.options[i]=op;
}
a.size=5;
document.getElementById("test").appendChild(a);
</script>
</body>
动态添加表格内容
insertRow(index):在index处插入一行。
insertCell(long index):在index处创建一个单元格,返回新创建的单元格。
<body id="test">
<script type="text/javascript">
var a=document.createElement("table");
a.style.width="800px";
a.style.borderCollapse="collapse";
a.border=1;
var caption=a.createCaption();
caption.innerHTML="表格标题";
for(var i=0;i<5;i++)
{
var tr=a.insertRow(i);
for(var j=0;j<7;j++)
{
var td=tr.insertCell(j);
td.style.padding="5px";
td.innerHTML="单元格内容"+i+j;
}
}
document.getElementById("test").appendChild(a);
</script>
</body>