创建节点

var p = createElement(element); // 创建标签

var text = document.createTextNode("文本节点"); // 创建文本节点

p.appendChild(text); // 将文本节点添加到新创建的p标签中

<body><div id="main"></div><script>window.onload = function () {var p = document.createElement("p");var text = document.createTextNode("this is new element");p.appendChild(text);var main = document.getElementById("main");main.appendChild(p);}</script>
</body>

或

<!DOCTYPE HTML>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><body><button onclick="add()" type="button">添加</button><div id="box"></div><script>// 获取id为box的标签div =document.querySelector('#box');// 节点添加事件function add(){var input = document.createElement("input");input.setAttribute('type', 'text');     div.appendChild(input); };</script></body>
</html>

在所选子节点插入新节点

insertBefore()

<body><div id="main"><p id="p1">我是第一行</p><p id="p2">我是第二行</p><p id="p3">我是第三行</p></div><script>window.onload = function () {var p = document.createElement("p");var text = document.createTextNode("我是插入的文本");p.appendChild(text);var main = document.getElementById("main");var child = document.getElementById("p2");main.insertBefore(p,child);}</script>
</body>

移除所选子节点

removeChild(child)

<body><div id="main"><p id="p1">我是第一行</p><p id="p2">我是第二行</p><p id="p3">我是第三行</p></div><script>window.onload = function () {var parent = document.getElementById("main");var child = document.getElementById("p3");parent.removeChild(child);}</script>
</body>

或者

<body><div id="main"><p id="p1">我是第一行</p><p id="p2">我是第二行</p><p id="p3">我是第三行</p></div><script>window.onload = function () {var child = document.getElementById("p2");child.parentNode.removeChild(child);}</script>
</body>

替代所选子节点

replaceChild(para, child)

<body><div id="main"><p id="p1">我是第一行</p><p id="p2">我是第二行</p><p id="p3">我是第三行</p></div><script>window.onload = function () {var p = document.createElement("p");var text = document.createTextNode("我是刚替代完的节点");p.appendChild(text);var parent = document.getElementById("main");var child = document.getElementById("p1");parent.replaceChild(p,child);}</script>
</body>

JavaScript增加和删除DOM节点相关推荐

vue 之 ele动态删除dom节点
目录 vue 之 ele动态删除dom节点完全删除子dom节点删除最后一个dom节点 vue 之 ele动态删除dom节点比如上传失败的时候,由于ele之中的dom节点已经加载上去了.这时候需要 ...
java dom 获得子元素_在JavaScript中删除DOM节点的所有子元素
我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: hello world 我抓住了我想要的节点,如下所示: var myNode = document.get ...
JavaScript文档对象模型DOM节点操作之删除节点（6）
removeChild方法只能删除当前节点的子节点效果展示: 示例展示: <!DOCTYPE html> <html><head><meta charset ...
Javascript元编程创建DOM节点
在使用javascript创建DOM节点的过程中,难免要使用document.createElement.setAttribute. document.createTextNode等冗长.还有浏览器兼 ...
JavaScript-操作DOM对象-删除dom节点
删除节点删除节点的步骤: 先获取父节点,再通过父节点删除自己 <!DOCTYPE html> <html lang="en"> <head>& ...
JavaScript文档对象模型DOM节点操作之复制节点（7）
示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
JavaScript文档对象模型DOM节点操作之创建和添加节点（5）
得出结论:创建元素节点后,必须要把刚创建的元素节点添加到相应的元素下,否则不会在页面出现示例代码: <!DOCTYPE html> <html><head>< ...
JavaScript文档对象模型DOM节点操作之兄弟节点（4）
示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
JavaScript文档对象模型DOM节点操作之第一个子元素和最后一个子元素（3）
推荐使用解决方案的方法,实际开发用的就是这种方法示例代码: <!DOCTYPE html> <html><head><meta charset=" ...

JavaScript增加和删除DOM节点

创建节点

在所选子节点插入新节点

移除所选子节点

替代所选子节点

JavaScript增加和删除DOM节点相关推荐

最新文章

热门文章