让 nodeValue “支持” HTML

作者:vkvi 来源:ITPOW(原创) 日期:2008-11-26

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">
<!--
//ITPOW www.itpow.com
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>

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

相关阅读

相关文章