<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>我是原本的0</p>
<p>我是原本的1</p>
<p>我是原本的2</p>
</div>
<script>
var oBox = document.getElementById('box');
var oPs = oBox.getElementsByTagName('P');
// 创建孤儿节点
var oP = document.createElement('p');
// 设置内部文字内容
oP.innerText='我是新来的';
// 上树
// oBox.appendChild(oP);
oBox.insertBefore(oP,oPs[1]);
</script>
</body>
</html>
- document.createElement()方法用于创建一个指定tagname的HTML元素
- var oDiv=document.createElement('div');
- 新建的节点是“孤儿节点”，这意味着它==并没有被挂载到DOM树上==，我们无法看到他
- 必须继续使用==appendChild()或insertBefore()方法==将孤儿节点插入到DOM树上
==appendChild==
- 任何已经在DOM树上的节点，，都可以调用appendChild()方法，它可以将孤儿节点挂载到它的内部，==成为它的最后一个子节点
- ==父节点.appendChild(孤儿节点)；==
==insertBefore()==
- 任何已经在DOM树上的节点，，都可以调用insertBefore()方法，它可以将孤儿节点挂载到它的内部，==成为它的“标杆子节点”之前的节点==
- 父节点.insertBefore(孤儿节点，标杆节点)；
创建节点的顺序
，首先应先创建一个“孤儿节点”，此时新增节点还未在DOM树上。 其次在利用appendChild()方法将其放在父节点内部==成为父节点的最后一个子节点== 还可以利用insertBefore()方法将孤儿节点挂载到父节点的内部，==成为它的“标杆子节点”之前的节点== 标杆子节点可以通过getElementsByTagName('P')，将其得到此时得到 的为以数组 insertBefore(oP,oPs[1]);通过改变数组下标将新增节点插入此数组节点中任一节点之前； 第二种很nice啊！！！
