                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

關(guān)于replaceChild()的相關(guān)問(wèn)題

<body>

<div><b id="oldnode">JavaScript</b>是一個(gè)很常用的技術(shù)，為網(wǎng)頁(yè)添加動(dòng)態(tài)效果。</div>

? <a href="javascript:replaceMessage()"> 將加粗改為斜體</a>

? ? 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>

麻煩給解答下，我這個(gè)代碼無(wú)法實(shí)現(xiàn)粗體變斜體的效果，本人是新手自學(xué)，麻煩跟解釋的詳細(xì)一點(diǎn)，不勝感謝！

大年糕

2017-06-02

源自：JavaScript進(jìn)階篇 9-15

關(guān)注問(wèn)題我要回答

1312

操作

收起

2 回答

慕勒7123956 回答被采納 +3 積分
2017-06-02

因?yàn)閕nnerHTML獲取的是一個(gè)字符串，不是node類(lèi)型的，但是你用appendChild函數(shù)里面的參數(shù)（就是括號(hào)里面的那個(gè)），必須是node類(lèi)型的，所以你可以

????function?replaceMessage()
{
var?newnode=document.createElement("i");
var?oldnode=document.getElementById("oldnode");
var?newnodeText=oldnode.innerHTML;//字符串類(lèi)型的
var?text=document.createTextNode(newnodeText);//創(chuàng)建一個(gè)文本節(jié)點(diǎn)。這樣就可以使用節(jié)點(diǎn)的方法
newnode.appendChild(text);//添加這個(gè)節(jié)點(diǎn)
oldnode.parentNode.replaceChild(newnode,oldnode);

}

你也可以直接獲取舊節(jié)點(diǎn)的子節(jié)點(diǎn)，然后添加到新的里面去

function?replaceMessage(){
?	var?newnode=document.createElement("i");
?	var?oldnode=document.getElementById("oldnode");	//找到原b節(jié)點(diǎn)
var?textnode=oldnode.childNodes;	//獲取原節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)組，這個(gè)方法獲取的就是數(shù)組，雖然這個(gè)例子中只有一個(gè)元素
???	newnode.appendChild(textnode[0]);	//把原子節(jié)點(diǎn)（就是那個(gè)JavaScript文本節(jié)點(diǎn)）添加給新節(jié)點(diǎn)i
???	oldnode.parentNode.replaceChild(newnode,oldnode);	//替換節(jié)點(diǎn)
?	}