创建DOM元素:createElement("节点");
添加DOM元素:父级.appendChild(节点);
插入DOM元素:父级.insertBefore(节点, 要插入的位置);
删除DOM元素:oul.removeChild(节点);
下面通过两个实例来简单实用下这些方法:
1:向ul中插入li,并且每次新插入的li都在上面。为了区别开那些事新创建的li,可以在上面再添加一个文本框,里面输入一些内容,在点击创建节点的按钮,新创建的li中会出现在ul中,并且会显示文本框中输入的内容;
代码如下:
JavaScript代码:
<script type="text/javascript">
window.onload = function () {
var oul = document.getElementById("ul1");
var obtn = document.getElementById("btn_submit");
var otxt = document.getElementById("txt_content");
var oli = oul.getElementsByTagName("li"); //获取指定ul下的li,其目的在于后面的插入判断
obtn.onclick = function () {
var li = document.createElement("li");
if (oli.length > 0) //如果指定的ul中存在li,则我们可以在第1个li之前插入li
oul.insertBefore(li, oli[0]);
else //如果没有li,则我们直接添加进去一个li
oul.appendChild(li);
li.innerHTML = otxt.value; //利用innerHTML往新创建的li里面添加内容
};
};
</script>
HTMl代码:
<body>
<input id="txt_content" type="text" />
<input type="button" id="btn_submit" value="创建节点" />
<ul id="ul1"></ul>
</body>
2:利用removechild删除超链接;
其代码如下:
javaScript代码:
<script type="text/javascript">
window.onload = function () {
var oul = document.getElementById("ul1");
var oa = document.getElementsByTagName("a");
for (var i = 0; i < oa.length; i++) {
oa[i].onclick = function () {
oul.removeChild(this.parentElement);
};
}
};
</script>
HTML代码:
<body>
<ul id="ul1">
<li><a href="javascript:;">删除</a></li>
<li><a href="javascript:;">删除</a></li>
<li><a href="javascript:;">删除</a></li>
<li><a href="javascript:;">删除</a></li>
<li><a href="javascript:;">删除</a></li>
</ul>
</body>