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

253 阅读 0 评论 167 点赞

我是靠谱客的博主悲凉高山，最近开发中收集的这篇文章主要介绍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> 