1.创建节点
<body>
<ul>
<li>123</li>
</ul>
<script>
//创建节点元素
var li = document.createElement('li');
//增添节点元素node.appendChild(child) node父级 child子集
var ul = document.querySelector('ul');
ul.appendChild(li);
//node.insertBefore(child,指定元素)
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
</script>
</body>
此代码通过js增加了两个li,通过两个不同的封装函数将li放在ul中,一个是放在前面,一个是放在后面。
2.删除节点
<body>
<button>删除</button>
<ul>
<li>brother</li>
<li>mother</li>
<li>father</li>
</ul>
<script>
//删除节点node.
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
btn.onclick = function() {
if (ul.children.length == 0)
this.disabled = true;
else {
ul.removeChild(ul.children[0]);
}
}
</script>
</body>
综合案例:简单发布留言案例
<style>
ul {
width: 800px;
}
li {
width: 800px;
height: 100px;
margin: 10px 0;
color: red;
background-color: #999;
}
li a {
float: right;
}
</style>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul></ul>
<script>
//获取元素
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
var text = document.querySelector('textarea');
//建立事件
btn.onclick = function() {
if (text.value == '') {
alert('你没有输入内容');
return false;
} else {
//创建元素
var li = document.createElement('li');
//先创建了li,才能赋值
li.innerHTML = text.value + "<a href='javascript:;'>删除<a>";
//添加节点
ul.insertBefore(li, ul.children[0]);
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
ul.removeChild(this.parentNode)
}
}
}
}
</script>
</body>
最后这个案例在许多网站都有应用,我们可以通过js实现更加灵活的效果,大那是js并不复杂,所以html,css需要写的完整,js来锦上添花。代码欢迎读者使用!