本文通过JavaScript实现DOM操作，包括创建新节点并添加到文档中，替换现有节点，以及删除指定节点。提供了三个功能按钮，分别对应添加、替换和删除操作，动态更新页面内容。
<script type="text/javascript">
function addnode() {
var pnode = document.createElement('p');
var tnode = document.createTextNode('烟花三月下扬州');
pnode.appendChild(tnode);
document.body.appendChild(pnode);
}
function replacenode() {
var pnode = document.createElement('p');
var tnode = document.createTextNode('故人西辞黄鹤楼');
pnode.appendChild(tnode);
//获取要替换的p节点
var oldnode = document.getElementsByTagName('p')[0];
//有限制此方法：oldnode.replaceNode(pnode, oldnode);
oldnode.parentNode.replaceChild(pnode, oldnode);
}
function removenode() {
var oldnode = document.getElementsByTagName('p')[0];
//oldnode.parentNode返回的是p节点的父节点，这里就是body，然后使用body节点的removeChild方法删除其下面的pnode节点
oldnode.parentNode.removeChild(oldnode);
}
</script>
</head>
<body>
<input id="Button1" type="button" value="添加节点" onclick="addnode()"/>
<input id="Button2" type="button" value="替换节点" onclick="replacenode()"/>
<input id="Button3" type="button" value="删除节点" onclick="removenode()"/>
</body>
function addnode() {
var pnode = document.createElement('p');
var tnode = document.createTextNode('烟花三月下扬州');
pnode.appendChild(tnode);
document.body.appendChild(pnode);
}
function replacenode() {
var pnode = document.createElement('p');
var tnode = document.createTextNode('故人西辞黄鹤楼');
pnode.appendChild(tnode);
//获取要替换的p节点
var oldnode = document.getElementsByTagName('p')[0];
//有限制此方法：oldnode.replaceNode(pnode, oldnode);
oldnode.parentNode.replaceChild(pnode, oldnode);
}
function removenode() {
var oldnode = document.getElementsByTagName('p')[0];
//oldnode.parentNode返回的是p节点的父节点，这里就是body，然后使用body节点的removeChild方法删除其下面的pnode节点
oldnode.parentNode.removeChild(oldnode);
}
</script>
</head>
<body>
<input id="Button1" type="button" value="添加节点" onclick="addnode()"/>
<input id="Button2" type="button" value="替换节点" onclick="replacenode()"/>
<input id="Button3" type="button" value="删除节点" onclick="removenode()"/>
</body>
扫一扫
5168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
