為什么只能改過去,不能改回來
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
</head>
<body>
? <div><i id="oldnode">JavaScript</i>是一個很常用的技術,為網頁添加動態效果。</div>
? <a href="javascript:replaceMessage()"> 將加粗改為斜體</a><br/>
? <a href="javascript:replaceMessage1()">將斜體改為粗體</a>
? ? <script type="text/javascript">
? ? ? function replaceMessage(){
? ? ? ? ? var oldHTML= oldnode.innerHTML; ? ? ?
? ? ? ? ? var newnode=document.createElement("b");
? ? ? ? ? var oldNode=document.getElementById("oldnode");
? ? ? ? ? oldNode.parentNode.replaceChild(newnode,oldNode);
? ? ? ? ? ?newnode.innerHTML=oldHTML;
? ? ? ?} ??
? ? ? function replaceMessage1(){
? ? ? ? ? var oldHTML=oldnode.innerHTML;
? ? ? ? ? var newnode=document.createElement("b");
? ? ? ? ? var oldNode=document.getElementById("oldnode");
? ? ? ? ? oldNode.parentNode.replaceChild(newnode,oldNode);
? ? ? ? ? newnode.innerHTML=oldHTML;
? ? ? }
? </script>
??
?</body>
</html>
2018-01-28
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
</head>
<body>
? <div><i id="oldnode">JavaScript</i>是一個很常用的技術,為網頁添加動態效果。</div>
? <a href="javascript:replaceMessage()"> 將加粗改為斜體</a><br/>
? <a href="javascript:replaceMessage1()">將斜體改為粗體</a>
? ? <script type="text/javascript">
? ? ? function replaceMessage(){
? ? ? ? ? var newnode=document.createElement("i");
newnode.id='oldnode';
? ? ? ? ? var oldNode=document.getElementById("oldnode");
? ? ? ? ? console.log('i',oldNode)
? ? ? ? ? ?var oldHTML= oldNode.innerHTML;? ? ??
? ? ? ? ? oldNode.parentNode.replaceChild(newnode,oldNode);
? ? ? ? ? ?newnode.innerHTML=oldHTML;
? ? ? ?}? ?
? ? ? function replaceMessage1(){
? ? ? ? ? var newnode=document.createElement("b");
? ? ? ? ? newnode.id='oldnode';//由于是根據id去獲取的信息,但是在下面你進行重置的時候,將<i id="oldnode">JavaScript</i>替換后沒有了id='oldnode'所以會報錯,同時你的標簽在由加粗變為斜體時,標簽應該變化為i
? ? ? ? ? var oldNode=document.getElementById("oldnode");
? ? ? ? ? ? ? var oldHTML=oldNode.innerHTML;
? ? ? ? ? oldNode.parentNode.replaceChild(newnode,oldNode);
? ? ? ? ? newnode.innerHTML=oldHTML;
? ? ?}
? </script>
?</body>
</html>