一段范例用代码
<div id="users">
<h2>学习</h2>
<ul>
<li class="user">
<img src="1.jpg" >
<a href="/user/1">小明</a>
</li>
<li class="user">
<img src="2.jpg" >
<a href="/user/2">青草</a>
</li>
<li class="user last">
<img src="3.jpg" >
<a href="/user/3">XXX</a>
</li>
</ul>
</div>
一个需求
我们要在上面的users列表中插入一个新的用户我们要进行以下操作
+ 创建li节点,设置li节点的class属性,插入li节点
+ 创建img节点,设置节点的src属性,插入img节点
+ 创建a节点,设置a节点的href属性,设置a节点的内容,插入a节点
创建节点
element = document.createElement(tagName)
比如document.createElement("div");
这样我们就得到了空的div
针对上面的需求,可以写下如下代码
var li = document.createElement("li");
var img = document.createElement("li");
var a = document.createElement("a");
修改节点
针对于上面的填充a的内容,我们使用修改节点操作
* textContent
* innerText(不符合W3C规范)
element.textContent
节点及其后代节点的文本内容,比如在上面的示例代码中当我们使用users.textContent;
我们得到的就是其中所有的文本”学习 小明 青草 XXX”
比如当我们用user-last选中最后一个user后我们可以直接用user-last.textElemrnt = YYY
来修改最后一个user的文本内容
element.innerText
这个方法是更被广泛使用的,因为element.textContent不兼容IE9以下浏览器。innerText的使用方法和textContent相同。
问题:ff不支持(火狐浏览器)
解决方案:
if(!('innerText' in document.body)){
HTMLElement.prototype._defineGetter_("innerText",function(){
return this.textContent;
});
HTNLElement.prototype._defingSetter_("innerText",function(s){
return this.textContent = s;
});
}
有了这样的兼容性代码,innerText就可以兼容所有的平台
针对上面的需求,可以写下如下代码
var li = document.createElement("li");
var img = document.createElement("li");
var a = document.createElement("a");
a.innerText = "YYY";
插入节点
插入节点有两个方法:
* appendChild
* insertBefore
appendChild
var achild = element.appendChild(achild);
在节点的最后追加子节点,所以是在用这个的方法的时候要注意是否的顺序有要求。
针对上面的需求,可以写下如下代码
var ul = users.getElementByTagName("ul")[0];
var li = document.createElement("li");
ul.appendChild("li");
var img = document.createElement("li");
li.appendChild("img");
var a = document.createElement("a");
a.innerText = "YYY";
li.appendChild("a");
insertBefore
如果我们想把新的li插入到ul的第一位,我们可以用这个方法
var achild = element.insertBefore(achild,referenceChild);在指定的referenceChild节点前面插入节点。
针对上面的需求,可以写下如下代码
var ul = users.getElementByTagName("ul")[0];
var li = document.createElement("li");
ul.insertBefoe(li,ul.firstChild); //实现在最前插入
var img = document.createElement("li");
li.appendChild("img");
var a = document.createElement("a");
a.innerText = "YYY";
li.appendChild("a");
删除节点
child = element.removeChild(child);这样就删除了指定的子元素;
var user3 = users.getElementsByClassName('user')[1]; //用户XXX
users.removeChild(user2); //删除了用户XXX
innerHTML
这个方法得到的是节点的html内容,同时我们可以直接对HTML代码进行编辑来达到创建插入删除等功能。
var li = dovument.createElement("li");
li.className = 'user';
ul.appendChild(li);
li.innerHTML = "<img src = '4.jpg'>\
<a href = '/user/4/'>ZZZ</a>";
这样就直接完成饿了创建插入。
既然innerHTML功能呢这么强大,那么他有什么问题呢?
* 内存泄露,在低版本中可能不能回收内存
* 安全问题,innerHTML不会检查代码,直接运行,会有风险
所以innerHTML方法建议仅用于新的节点,比如创建插入,内容最好是可控的,而不是用户填写的内容。