转行学开发，代码100天——2018-04-20
JavaScript对DOM元素的创建、删除操作。
1.创建DOM元素
appendChild方法
- createElement(ochild);
- oparent.appendChild(ochild)
insertBefore方法
- createElement(ochild);
- insertBefore（ochild,opos）;
如通过按钮操作，创建元素
<input id = "txt" type="text" name="text">
<input id ="Abtn" type="button" value="向前添加" name="添加">
<input id ="Bbtn" type="button" value="向后添加" name="添加">
<ul id="ull"></ul>
<script type="text/javascript">
window.onload = function () {
var oBtn0 = document.getElementById("Abtn");
var oBtn1 = document.getElementById("Bbtn");
var oUl = document.getElementById("ull");
var oTxt = document.getElementById("txt");
// var oLi = document.createElement('li');
//向前插入
oBtn0.onclick = function(){
if (oTxt.value=="") {
alert("请填写添加内容");
}else
{
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
var aLi = oUl.getElementsByTagName('li');
if (aLi.length>0) {
oUl.insertBefore(oLi,aLi[0])
}else
oUl.appendChild(oLi);
}
}; //向后插入 oBtn1.onclick =function(){
if (oTxt.value=="") {
alert("请填写添加内容");
}else
{
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
//父节点.append(子节点)
oUl.appendChild(oLi);
}
};
};
</script>
通过上述代码实现li元素及其内容的添加。
但是，由于浏览器兼容性问题，在向前插入的代码段中对li个数进行了判断
//向前插入
oBtn0.onclick = function(){
if (oTxt.value=="") {
alert("请填写添加内容");
}else
{
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
var aLi = oUl.getElementsByTagName('li');
if (aLi.length>0) {
oUl.insertBefore(oLi,aLi[0])
}else
oUl.appendChild(oLi);
}
};
2.元素的删除
父级.removeChild(子节点); //彻底删除元素
如：
<div id="container">
<ul id="ul">
<li>asjhasf<a href="javascript:;">删除</a></li>
<li>432sdf<a href="javascript:;">删除</a></li>
<li>asj23fsfhasf<a href="javascript:;">删除</a></li>
<li>23tvasjhasf<a href="javascript:;">删除</a></li>
</ul>
</div>
通过选择“删除”即将当前行内容删除
JavaScript实现中，首先获取ul父级节点，即当前a标签。利用removeChild方法删除
//删除元素功能
var oull = document.getElementById("ul");
var oa = oull.getElementsByTagName("a");
for (var i = 0; i < oa.length; i++) {
oa[i].onclick = function()
{
oull.removeChild(this.parentNode);
}
}
3.文档碎片：DocumentFragment
一个很形象的比喻，即文档碎片相当于生活中的购物袋。当我们购买的物品较多时，往往通过购物袋打包拎回家。当然，物品较少时直接拎回去得了。
于此类似，当我们需要插入很多元素时，先将插入的元素装入文档碎片中，最后将该文档碎片添加到父节点即可。
（果真，计算机世界是对现实生活的模拟啊）
//文档碎片
var aul = document.getElementById("oul");
var oFrag = document.createDocumentFragment();
for (var i = 0; i < 1000 ; i++) {
var oli = document.createElement("li");
oFrag.appendChild(oli);
}
aul.appendChild(oFrag);
文档碎片的使用对网页性能影响不大，已较少使用。