JavaScript增加和删除DOM节点

创建节点 

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>