手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

JavaScript实现DOM删除节点JS删除DOM节点示例

时间:2024-11-05 05:07:35

本经验是介绍JavaScript语言中,使用removeChild() 函数删除节点的详解。

工具/原料

电脑

文本编辑器

JS函数介绍

1、removeChild() 函数的介绍如下图:

JavaScript实现DOM删除节点JS删除DOM节点示例

2、removeChild() 函数的语法如下图:

JavaScript实现DOM删除节点JS删除DOM节点示例

3、removeChild() 函数语法参数说明:

JavaScript实现DOM删除节点JS删除DOM节点示例

函数应用示例

1、removeChild() 函数的实现代码://删除函数function removeDom(){ var deldom=document.getElementById('removedom'); if(deldom.hasChildNodes()){ deldom.removeChild(deldom.lastChild); } }

JavaScript实现DOM删除节点JS删除DOM节点示例

2、实现函数的调用代码如下:<body> <h1>删除节点</h1> <div id="removedom"> <p>节点一</p> <p>节点二</p> </div> <form> <input type="button" value="删除操作" onclick="removeDom();"/> </form></body>

JavaScript实现DOM删除节点JS删除DOM节点示例

3、示例的完整代码:<!doctype html><html><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <title>removeChild方法示例</title><script language="javascript">//删除函数function removeDom(){ var deldom=document.getElementById('removedom'); if(deldom.hasChildNodes()){ deldom.removeChild(deldom.lastChild); } }</script></head><body> <h1>删除节点</h1> <div id="removedom"> <p>节点一</p> <p>节点二</p> </div> <form> <input type="button" value="删除操作" onclick="removeDom();"/></form></body></html>示例使用效果:

JavaScript实现DOM删除节点JS删除DOM节点示例
JavaScript实现DOM删除节点JS删除DOM节点示例
© 手抄报圈