javaScript(JS)替换节点实现思路介绍

复制代码 代码如下:

  <title></title>

  <script type="text/javascript">

  function createNode() {

  var pNode = document.createElement('p');

  var tNode = document.createTextNode('烟花三月下杨州');

  pNode.appendChild(tNode);

  document.body.appendChild(pNode);

  }

  function r() {

  var pNode = document.createElement('p');

  var tNode = document.createTextNode('故人西辞黄鹤楼');

  pNode.appendChild(tNode);

  //获取要替换的节点

  var reNode = document.getElementsByTagName('p')[0];

  //这种方法只适用于IE浏览器

  //reNode.replaceNode(pNode, reNode);

  //适用于各种浏览器

  reNode.parentNode.replaceChild(pNode, reNode);

  }

  function reNode() {

  var oldNode = document.getElementsByTagName('p')[0];

  //oldNode.parentNode返回的是p节点的父节点,这里就是body

  //然后使用body节点的removeChild方法删除下的oldNode节点

  oldNode.parentNode.removeChild(oldNode);

  }

  </script>

  </head>

  <body>

  <input id="Button1" type="button" value="创建节点" onclick="createNode()"/>

  <input id="Button2" type="button" value="替换节点" onclick="r()" />

  <input id="Button3" type="button" value="删除节点" onclick="reNode()" />

  </body>

  </html>