怎么运用js或jquery，在已经获取父节点的情况下可以多次增加该节点的子节点

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var para=document.createElement("p")

var node=document.createTextNode("这是一个新段落。")

para.appendChild(node)

var element=document.getElementById("div1")

element.appendChild(para)

</script>

这段代码创建新的<p> 元素：

var para=document.createElement("p")

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是一个新段落。")

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node)

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

var element=document.getElementById("div1")

以下代码在已存在的元素后添加新元素：

element.appendChild(para)

在获取到父节点的情况下 var parentNode =...

多次执行parentNode.appendChild(已经创建好的子节点)即可多次添加子节点

    1.node.nodeName：查看节点名称（元素节点返回标签名（大写），文本节点返回 #text）

    2.node.nodeType：查看节点类型（元素节点返回1，属性节点返回2，文本节点返回3）

    3.node.nodeValue：查看节点的值（元素节点返回null，文本节点返回文本值）

    DOM对象集合了HTML标签中能被解析的属性（标准属性）作为DOM对象的属性

    查询到的input节点包含了type、name、value等属性，其他未设置值的属性也包含在节点对象中

    1.node.offsetLeft：元素在页面中的水平坐标值

    2.node.offsetTop：元素在页面中的垂直坐标值

    3.node.clientWidth：元素在页面视口区域占据的宽度(不含边框)

    4.node.clientHeight：元素在页面视口区域占据的高度(不含边框)

    5.node.offsetWidth：元素在页面区域占据的宽度(含边框)

    6.offsetHeight：元素在页面区域占据的高度(含边框)

    7.scrollLeft：窗口或者容器内容水平滚动的距离

    8.scrollTop：窗口或者容器内容垂直滚动的距离

融在第三点最后了

    1.方法名.innerHTML（包含了此方法对应的对象内所有空白文本以及标签在内的所有内容）

    2.方法名.innerText（包含了此方法对应的对象内文本内容且空白文本除外）

    1.node.getAttribute()：读取节点的属性值

    2.node.setAttribute（）：设置节点属性值

    3.node.removeAttribute（）：删除节点的属性

    4.node.hasAttribute（）：检测节点是否存在某属性

    1.方法名.querySelector（选择器）：按CSS样式查询，返回第一个节点

    2.node.querySelectorAll(选择器)：按CSS样式查询，返回所有节点集合

    3.node.getElementsByTagName(tname)：查询node下面所有标签名为tname的元素集合

    4.node.getElementsByClassName(cname)：查询node下面所有类名为cname的元素集合

    1.往父节点插入子节点并指定所有元素的后面

        父级方法名.appendChild（插入的元素）  

    2.往父节点插入子节点并指定在某个子元素的前面

        父级方法名.insertBefore（插入的元素，插入的元素后的一个元素名）

    注意：在dom中插入节点都是基于父节点来完成的

    1. 父级方法名.removeChild（子级元素）：删除父级元素中的子级节点

    1.父级方法名.replaceChild（new，old）：将父级元素中的old节点替换成一个新的new节点

    1.浅复制：node.cloneNode()：只复制此元素不包含子元素

    2.深复制：node.cloneNode(true)：复制此元素且包含子元素

    1.父级元素.hasChildNodes() ：检测节点是否含有子节点，包括空白节点    

    1.node.parentNode：node的父节点

    2.node.childNodes ：node所有子节点

    3.node.children：node所有子元素 

    4.node.firstChild：node的第一个子节点

    5.node.firstElementChild：node的第一个子元素 

    6.node.lastChild ：node的最后一个节点

    7.node.lastElementChild：的最后一个元素

    8.node.nextSibling：node的下一个兄弟节点

    9.node.nextElementSibling：node的下一个兄弟元素

    10.node.previousSibling：node的前一个兄弟节点

    11.node.previousElementSibling：node前一个兄弟元素

十四、节点样式 *** 作

    1.html标签中集合了style的标准属性因此可以使用 DOM.style访问样式， 注意 它只能访问使用style定义的内联样式，而不能访问内部和外链样式，且访问样式需要使用驼峰替代" - "

    2.当CSS样式较多时，可以使用DOM.cssText来重置。

    3.window.getComputedStyle()：返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后，报告元素的所有CSS属性的值

1）一共12个节点类型

2）dom *** 作就是对节点进行 *** 作

3）节点的类型的获取方法notetype

4）ie9以上及chrome safari firefox 会将换行符当成节点

（1）静态获取

（2）返回带有指定ID的元素

var box1=document.getElementById('box')

（1）根据标签名获取

（2）得到的是个数组

var div1=document.getElementsByTagName('div')[0]

（1）根据类名获取元素

（2）动态获取

（3）得到的是一个数组

var box=document.getElementsByClassName('box')[0]

（1）返回符合要求第一个元素

（2）通过css选择器来获取指定标签

（3）静态获取

（1）返回所有匹配元素

（2）根据css选择器来获取所有标签

（3）得到的是一个数组

获取兄弟节点

获取下一个兄弟标签

获取上一个兄弟节点

获取上一个兄弟标签

获取最后一个子节点

获取最后一个子标签

获取所有非标签类型的子节点

获取所有子标签节点

获取父节点

增加节点

var div=document.createElement('div')

在父元素的末尾，插入节点

在添加元素前，需要将元素先创建好

div.appendChild(div)

修改指定子节点

删除指定子节点

在删除前需要先获取到被删除元素

div.removeChild(box)

删除当前节点

需要先获取到被删除的节点

div.remove()

（1）设置ID

div.id='box'

（2）设置class

div.className='box'

（3）设置style

div.style.width='10px'

（4）设置图片路径

img.src='../'

（5）.自定义属性

---