jQuery和JS中的添加节点方法

jQuery append() 方法在被选元素的结尾插入内容。

实例

$("p")append("Some appended text");

jQuery prepend() 方法在被选元素的开头插入内容。

实例

$("p")prepend("Some prepended text");

JS原生API插入节点的方式大致有innerHTML、outerHTML、appendChild、insertBefore、insertAdjacentHTML、applyElement这6种。

innerHTML：获取标签内部的HTML内容。

outerHTML：获取包括目标标签在内，以及内部HTML的内容。

appendChild：向目标标签末尾添加子节点，返回参数节点。

insertBefore：向目标节点的第二个参数位置添加第一个参数为子节点，返回第一个参数。

insertAdjacentHTML：向目标节点的指定位置添加节点；第二个参数为要添加的节点，第一个参数指定位置，位置包括beforebegin(添加为previousSibling)、afterbegin(添加为firstChild)、beforeend(添加为lastChild)、afterend(添加为nextSibling)。它还有两个兄弟函数，分别是insertAdjacentElement和insertAdjacentText，前者添加元素并返回该元素，后者添加文本。

applyElement：IE的函数，将参数节点设置成目标节点的外包围或者内包围；第一个为参数节点，第二个参数指定方式，方式包括inside(内包围，即参数节点将目标节点的子节点包起来)、outside(外包围，即参数节点将目标节点包起来)。

先说一下JS的获取方法，其要比jQuery的方法麻烦很多，后面以JQUERY的方法作对比。

JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素

<div id="test">

<div></div>

<div></div>

</div>

原生的JS获取ID为test的元素下的子元素。可以用：

var a = docuemntgetElementById("test")getElementsByTagName("div"); 这样是没有问题的

此时alength=2；

但是如果我们换另一种方法

var b =documentgetElementById("test")childNodes;

此时blength 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换行也当做一个元素了。

所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。

function del_ff(elem){

var elem_child = elemchildNodes;

for(var i=0; i<elem_childlength;i++){

if(elem_child[i]nodeName == "#text" && !/\s/test(elem_childnodeValue))

{elemremoveChild(elem_child)

}

}

}

上述函数遍历子元素，当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。

nodeNames可以得到一个节点的节点类型，/\s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符

test() 方法用于检测一个字符串是否匹配某个模式语法是： RegExpObjecttest(string)

如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

nodeValue表示得到这个节点里的值。

removeChild则是删除元素的子元素。

之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了

<div id="test">

<div></div>

<div></div>

</div>

<script>

function dom() {

var s= documentgetElementById("test");

del_ff(s); //清理空格

var chils= schildNodes; //得到s的全部子节点

var par=sparentNode; //得到s的父节点

var ns=snextSbiling; //获得s的下一个兄弟节点

var ps=spreviousSbiling; //得到s的上一个兄弟节点

var fc=sfirstChild; //获得s的第一个子节点

var lc=slastChile; //获得s的最后一个子节点

}

</script>

下面介绍JQUERY的父，子，兄弟节点查找方法

jQueryparent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span")parent()或者$("span")parent("class")

jQueryparents(expr),类似于jQueryparents(expr),但是是查找所有祖先元素，不限于父元素

jQuerychildren(expr)返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

jQuerycontents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个

jQuery对象返回，children()则只会返回节点

jQueryprev()，返回上一个兄弟节点，不是所有的兄弟节点

jQueryprevAll()，返回所有之前的兄弟节点

jQuerynext(),返回下一个兄弟节点，不是所有的兄弟节点

jQuerynextAll()，返回所有之后的兄弟节点

jQuerysiblings(),返回兄弟姐妹节点，不分前后

jQueryfind(expr),跟jQueryfilter(expr)完全不一样。jQueryfilter()是从初始的jQuery对象集合中筛选出一部分，而jQueryfind()

的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span")

1documentgetElementById("id名")

通过id属性的值查找，返回满足条件的第一个元素

2documentgetElementsByTagName("标签名")

通过标签名来获取页面中的元素。返回的是多个标签。

并不是真正的数组，但是我们可以想 *** 作数组一样 *** 作他（类数组）

3documentgetElementsByClassName("class名")

通过类名来获取页面中的元素。返回的也是多个标签

4documentgetElementsByName("表单元素name")

通过表单的name属性的值来获取元素

5documentquerySelector("div p a")

匹配指定 CSS 选择器的 第一个元素 。 如果没有找到，返回 null。

6documentquerySelectorAll("div")

获取所有满足条件的元素

7三个特殊节点

8childNodes 所有节点。包括各种节点

9fristChild 获取一个元素的第一个子节点

10lastChild 获取一个元素的最后一个子节点

11parentNode 获取一个元素的父节点

12previousSibling 获取一个元素的上一个兄弟节点

13nextSibling 获取一个元素的下一个节点

14children 只获取子元素

15firstElementChild 获取第一个元素子节点

16lastElementChild 获取最后一个元素子节点

17nextElementsibling 获取下一个元素兄弟节点

18previousElementsibling 获取上一个元素兄弟节点

19parentElement 获取父元素节点

20childElementCount 获取子元素的个数

1documentcreateElement(元素名) 创建一个元素节点

2documentcreateTextNode("这是新创建的一段文本") 创建一个文本节点

3appendChild() 添加元素到容器中

4insertBefore() 在一个节点前插入新节点

5removeChild() 删除子节点

6replaceChild() 替换子节点

7cloneNode() 克隆节点 传入true则复制所有节点

8setAttribute() 给元素设置属性

参数1：属性的名

参数2：属性的值

如果属性不存在，则添加；存在，则修改

9romveAttribute() 删除属性

参数：要删除的属性名

10getAttribute() 获取属性的值

参数：属性名

11访问 元素 id 名

boxid

12访问 元素 class 名

boxclassName

boxclassList 类数组

13获取标签名

boxtagName

boxnodeName

14innerHTML属性

innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。

值为为文本

15innerText属性

16outerHTML

跟innerHTML相比多包括了一个它自身

1访问行内（内联）样式表

2内部样式表和外部样式表的获取

getComputedStyle()

参数1：表示样式表所属的元素

参数2：如果获取的是伪元素的样式，传入伪元素，正常元素传入null 或不传

兼容性问题

3获取元素实际的宽高

offsetWidth 宽

offsetHeight 高

4获取元素参考父容器的left 和 top

offsetLeft 距离左部

offsetTop 距离上部

offsetParent 查找这个元素的参照父容器

节点至少拥有nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）三个基础属性

（1）元素节点---nodeType为1

（2）属性节点---nodeName为2

（3）文本节点---nodeValue为3 （文本节点包含文字、空格、换行等）

2、节点的层级

DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点

（1）根节点：<html>就是根节点，有且只有一个

（2）父节点：一个节点的上级节点

（3）子节点：一个节点的下级节点

（4）兄弟节点：具有相同父节点的节点

二、节点 *** 作

1、获取父节点

elementparentNode

2、获取子节点

（1）elementchildNodes：获得的是当前元素的所有子节点的集合（所有类型的子节点）

（2）elementchildren：是一个可读的属性，返回所有子元素节点

（3）firstChild：获取第一个子节点

（4）lastChild：获取最后一个子节点

（5）firstElementChild：获取第一个元素子节点

（6）lastElementChild：获取最后一个子元素节点

3、获取兄弟节点

（1）nextSibling：获取下一个兄弟节点

（2）previousSibling：获取上一个兄弟节点

（3）nextElementSibling：获取下一个兄弟元素(标签)节点

（4）previousElementSibling：获取前一个兄弟元素节点

<body>

<div class="demo">

<div class="box">

<h2>一二三四五</h2>

<span class="child">上山打老虎</span>

<p>注意！（保护国家保护动物）</p>

</div>

</div>

<div>

<ul>

<li id="l1">红楼梦</li>

<li>水浒传</li>

<li>三国演义</li>

<li>西游记</li>

</ul>

</div>

<script>

var child = documentquerySelector('child')

consolelog(childparentNode);

var ul = documentquerySelector('ul');

var lis = ulquerySelectorAll('li');

consolelog(lis);

consolelog("通过childNodes获得的子节点",ulchildNodes);

consolelog("children",ulchildren);

consolelog("ul的子节点",ulchildNodes);

consolelog("ul第一个子节点的类型：",ulchildNodes[0]nodeType);

consolelog("ul的第二个字节点类型：",ulchildNodes[1]nodeType);//1是元素，也叫标签

consolelog("ul的第一个子节点",ulfirstChild);

consolelog("ul的最后一个子节点：",ullastChild);

consolelog("ul的第一个子元素节点",ulfirstElementChild)

consolelog("ul的最后一个子元素节点",ullastElementChild)

var span = documentquerySelector('child');

consolelog("span的兄弟节点",spannextSiblingnextSibling)

consolelog("span的前一个兄弟节点",spanpreviousElementSibling)

</script>

</body>

登录后复制



4、创建节点

（1）doumentwrite():若页面加载完毕,再次调用该方法导致页面重绘

（2）elementinnerHTML：将节点加入到元素中,导致页面部分重绘

（3）documentcreateElement()：创建节点结构清晰、效率不高

5、添加和删除节点

（1）appendChild()：将节点添加到指定父节点的已有子节点的末尾

（2）insertBefore()：将节点添加到指定父节点的已有子节点的前面

（3）removeChild(child)：删除一个指定的节点。返回值为删除的节点

6、克隆节点

cloneNode(true/false)：复制节点

（1）true：深拷贝,复制节点本身和所有子节点

（2）false(或空)：浅拷贝,只复制节点本身

1）一共12个节点类型

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

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

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

（1）静态获取

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

var box1=documentgetElementById('box');

（1）根据标签名获取

（2）得到的是个数组

var div1=documentgetElementsByTagName('div')[0];

（1）根据类名获取元素

（2）动态获取

（3）得到的是一个数组

var box=documentgetElementsByClassName('box')[0];

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

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

（3）静态获取

（1）返回所有匹配元素

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

（3）得到的是一个数组

获取兄弟节点

获取下一个兄弟标签

获取上一个兄弟节点

获取上一个兄弟标签

获取最后一个子节点

获取最后一个子标签

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

获取所有子标签节点

获取父节点

增加节点

var div=documentcreateElement('div');

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

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

divappendChild(div);

修改指定子节点

删除指定子节点

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

divremoveChild(box);

删除当前节点

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

divremove();

（1）设置ID

divid='box';

（2）设置class

divclassName='box';

（3）设置style

divstylewidth='10px';

（4）设置路径

imgsrc='/';

（5）自定义属性

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script>

windowaddEventListener('load',function(){

// 点击t-1时同时触发t-2点击

documentgetElementById('x-1')addEventListener('click',function(e){

consolelog(etargetid);

// 创建事件对象

var event = documentcreateEvent('HTMLEvents');

eventinitEvent('click', false,false);

eventeventType = 'message';

// 把事件触发信息传递给兄弟节点

etargetnextElementSiblingdispatchEvent(event);

});

documentgetElementById('x-2')addEventListener('click',function(e){

consolelog(etargetid);

});

});

</script>

</head>

<body>

<ul>

<li id="x-1">t-1</li>

<li id="x-2">t-2</li>

</ul>

</body>

</html>

以上就是关于jQuery和JS中的添加节点方法全部的内容，包括:jQuery和JS中的添加节点方法、Javascript封装同胞节点思路、JS DOM对象等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！