让 nodeValue “支持” HTML

nodeValue 表示一个节点的值，它是不支持 HTML 的，比如我们通过 nodeValue 给 <p> 节点增加 <strong>strong</strong>，显示出来是原样显示，并不是加粗的 strong。有什么办法让 HTML 起作用呢？

<div id="parent">
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <p>p4</p>
</div>

现在我们要把第一个段落（即 p1）变成红色，如果我们知道它的 id，就很方便了，但我们只知道它父级元素的 id。

<script type="text/javascript">
<!--
//
var parent = document.getElementById("parent");
var p1;
//为了兼容多个浏览器，采用循环子节点的方式获得 p1 节点。
for (var i = 0; i < parent.childNodes.length; i++)
{
    if (parent.childNodes[i].nodeType == 1)
    {
        p1 = parent.childNodes[i]; //p1 是第一个元素节点。
        break;
    }
}

var newNode = document.createElement("p");
newNode.innerHTML = "<span style=/"color:#FF0000;/">" + p1.childNodes[0].nodeValue + "</span>"; //这里，为了方便直接用的 innerHTML。

parent.insertBefore(newNode, p1); //在 p1 前面插入根据 p1 处理后的节点。
parent.removeChild(p1); //删除 p1 节点。
//-->
</script>

以上代码即可实现要求的功能，以上代码也是符合标准的代码，在各浏览器中均有效。