JavaScript增加和删除DOM节点

最新推荐文章于 2023-03-01 21:56:48 发布

Trevor Lan

最新推荐文章于 2023-03-01 21:56:48 发布

阅读量4.6k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lwqBrell/article/details/89789073

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

创建节点

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>

Trevor Lan

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript增加和删除DOM节点

创建节点var p = createElement(element); // 创建标签 var text = document.createTextNode("文本节点"); // 创建文本节点p.appendChild(text); ...
复制链接

扫一扫