15.5.1 作为HTML的元素内容
Web浏览器很擅长解析HTML,通常设置innerHTML的效率非常高。但注意,对innerHTML属性用"+="操作符重复追加一小段文本通常效率低下,因为它既要序列化又要解析。HTML5说innerHTML应该在Document节点以及Element节点上工作正常,但这还未被普遍的支持。
HTML5还标准化了outerHTML属性。当查询outerHTML时,返回的HTML或XML标记字符串包含被查询元素的开头和结尾标签。当设置元素的outerHTML属性时,元素本身被新的内容所替换。只有Element节点定义了outerHTML属性,Document节点则没有。
IE引入的另一个特性是insertAdjacenHTML(),它将在HTML5中标准化,它能将HTML标记字符串插入到指定元素的相邻位置,标记是该方法的第二个参数,并且相邻的精确含义依赖于第一个参数,第一个参数时具有以下值之一的字符串:
例:
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<title>Text</title>
</head>
<body>Hello World!</body>
<span class="sparkline" data-ymin="0" data-ymax="10">1 1 1 2 2 3 4 5 5 4 3 5 6 7 7 4 2 1</span>
</html>
<script>
var sparkline = document.getElementsByClassName("sparkline")[0];
sparkline.insertAdjacentHTML("afterend",'<br><input type="file">');
</script>
15.5.2 作为纯文本的元素内容
在文档中插入或查询纯文本形式的内容,标准的方法是使用Node对象的textContent属性来实现,除火狐外,也可以用innerText来实现。
15.6 创建,插入和删除节点
15.6.1 创建节点
创建Element节点用createElemment(),创建Text节点用createTextNode().另一种创建新文档节点的方式是复制已经存在的节点,每一个节点有一个cloneNode()来
返回一个全新的副本,给方法传递参数true也能递归地复制所有的后代节点,或传递参数false只是执行一次潜复制。
15.6.2 插入节点
插入节点可以使用Node对象的appendChild()或者insertBefore()。appendChild()是在需要插入的Element节点上调用的。如果调用这两个方法将已经存在于文档中的一个节点再次插入,那个节点将自动从它当前的位置删除并在新的位置中重新插入,所以没有必要显示的删除该节点。
15.6.3 删除和替换节点
在要删除节点的父节点上调用removeChild()可以实现删除,传递两个参数给此方法就能实现替换,第一个参数为新节点,第二个参数为需要替代的节点。