关于replaceChild()的相关问题

来源:9-15 替换元素节点replaceChild()

大年糕

2017-06-02 11:34

<body>

<div><b id="oldnode">JavaScript</b>是一个很常用的技术,为网页添加动态效果。</div>

  <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

<script type="text/javascript">

    function replaceMessage()

{

var newnode=document.createElement("i");

var oldnode=document.getElementById("oldnode");

var newnodeText=oldnode.innerHTML;

newnode.appendChild(newnodeText);

oldnode.parentNode.replaceChild(newnode,oldnode);

}

    </script>


</body>

</html>

麻烦给解答下,我这个代码无法实现粗体变斜体的效果,本人是新手自学,麻烦跟解释的详细一点,不胜感谢!

写回答 关注

2回答

  • 慕勒7123956
    2017-06-02 11:59:08
    已采纳

    因为innerHTML获取的是一个字符串,不是node类型的,但是你用appendChild函数里面的参数(就是括号里面的那个),必须是node类型的,所以你可以

        function replaceMessage()
    {
    var newnode=document.createElement("i");
    var oldnode=document.getElementById("oldnode");
    var newnodeText=oldnode.innerHTML;//字符串类型的
    var text=document.createTextNode(newnodeText);//创建一个文本节点。这样就可以使用节点的方法
    newnode.appendChild(text);//添加这个节点
    oldnode.parentNode.replaceChild(newnode,oldnode);
    
    }

    你也可以直接获取旧节点的子节点,然后添加到新的里面去

    function replaceMessage(){
     	var newnode=document.createElement("i");
     	var oldnode=document.getElementById("oldnode");	//找到原b节点
    var textnode=oldnode.childNodes;	//获取原节点的子节点数组,这个方法获取的就是数组,虽然这个例子中只有一个元素
       	newnode.appendChild(textnode[0]);	//把原子节点(就是那个JavaScript文本节点)添加给新节点i
       	oldnode.parentNode.replaceChild(newnode,oldnode);	//替换节点
     	}


  • 大年糕
    2017-06-02 13:54:46

    非常感谢 !我 明白了!

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468195 学习 · 21891 问题

查看课程

相似问题