问答详情
源自：9-15 替换元素节点replaceChild()

为什么只能改过去，不能改回来


<!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-26 11:39

个回答

  • 小名杨瑶
    2018-01-28 15:05:17

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


    0