create系列创建节点
document.createElement()
var li = document.creatElement(“li”);
//创建一个文档li
document.createTextNode()
var txt = document.createTextNode(“Item”+(i+1));
//创建一个文本节点txt
document.creatDocumentFragment()
var fragment = document.createDocumentFragment();
//创建一个文档片段fragment
document.creatComment()
var comment = document.createComment(“a comment”);
//创建一个注释节点comment
var ul = document.getElementById(“myList”);//获得id
li.appendChild(txt);
//将文本txt放入文档li中
fragment.appendChild(li);
//将文档li放入文档片段fragment中
ul.appendChild(fragment);
//把文档放入ul中
高效创建节点方法
innerHTNL
使用innerHTML的限制
- 字符串的最左边不能出现空白,IE6-8会自动移除掉它
- 大多数浏览器不会对script标签进行脚本执行操作
- 不能单独创建meta,style,link等元素,一定要在前面加上一些字符
1.为script标签添加defer属性
2.script标签要在有作用域的元素之后
例如
var str=“alter(“hi”);</script>”;其中(
content.innerHTML = str;
content.removeChild(content.firxtChild);
outerHTML
读取值:调用它的元素及所有子节点的html标签*
写入值:会覆盖原来的元素和子节点
innerText
读取值:不包括标签,只包含内容
写入值:替换原来元素和子节点,并且把标签当做文本内容打印输出
(设置或获取位于对象起始和结束标签内的文本)
火狐浏览器支持textContent
读取值
fuction getInerText (element){
return (typeof element.textContent =="string)?element.textContent : element.innerText;
}
写入值
function setInnerText (element, text){
if(typeof element.textContent == "string"){
element.textContent = text;
}else{
element.innerText = text;
}
}
outerText
(建议少用)
读取值:不包括标签,值包含内容
写入值:原标签和内容都被一个新的字符串取代