JavaScript HTML DOM 元素(节点)
2023-09-14 09:00:18 时间
添加和删除节点(HTML 元素)。
创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
<html> <body> <div id="div1"> <p id="p1">这是一个段落</p> <p id="p2">这是第二个段落</p> </div> <script type="text/javascript"> /*新增加一个子节点*/ var para=document.createElement("p"); var node= document.createTextNode("这是新段落!"); para.appendChild(node); document.getElementById('p1').appendChild(para); /*删除p2节点*/ var childElement = document.getElementById('p2'); var parentElement= document.getElementById('div1'); parentElement.removeChild(childElement); </script> </body> </html>
这段代码创建新的 <p> 元素:
var para=document.createElement("p");
如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
var node= document.createTextNode("这是新段落!");
然后您必须向 <p> 元素追加这个文本节点:
document.getElementById('p1').appendChild(para);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
document.getElementById('p1').appendChild(para);
删除已有的 HTML 元素
如需删除 HTML 元素,您必须首先获得该元素的父元素:
var parentElement= document.getElementById('div1');
找到 id="p1" 的 <p> 元素:
var parentElement= document.getElementById('div1');
从父元素中删除子元素:
parentElement.removeChild(childElement);
相关文章
- 第一百二十六节,JavaScript,XPath操作xml节点
- JavaScript HTML DOM 元素(节点)
- [Javascript] Safely Access a Property on a JavaScript Array with Optional Chaining
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain (Object.setPrototypeOf())
- [Javascript] Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()
- [Javascript] Wait for Multiple JavaScript Promises to Settle with Promise.allSettled()
- [Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Deep Search nested tag element in DOM tree
- [Javascript] Identify and Deal with NaN in JavaScript
- [Javascript] Validate Data with the Every() Method
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Object.freeze() vs Object.seal()
- [Javascript] Redirect the browser using JavaScript
- [Node.js] Scraping Dynamic JavaScript Websites with Nightmare
- 如何使用Javascript 访问local部署的YAAS service
- Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle
- 几种用JavaScript实现的单例模式(Singleton Design Pattern)
- 用JavaScript实现2+2=5的奥秘
- javascript案例32——中文简繁体转换
- javascript箭头函数
- Prototype and Constructor in JavaScript
- Javascript 严格模式详解