<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>
麻烦给解答下,我这个代码无法实现粗体变斜体的效果,本人是新手自学,麻烦跟解释的详细一点,不胜感谢!
因为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); //替换节点 }
非常感谢 !我 明白了!