jquery如何添加兄弟节点不是子节点哦 O(∩_∩)O~_IT百科

1、首先获取要添加的节点的节点，然后创建一个节点，添加到节点的前面。

2、<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>DOM树 *** 作</title> <script> function f1(){。

3、找到狮子狗这个节点通过id查找到狮子狗节点 var ul=document.getElementById("d1")。

4、</head> <body>  <ul id="d1"> <li>亚索</li> <li>狮子狗</li> <li>披甲龙龟</li>。

5、 </ul> <input type="button" value="追加蛮王" onclick="f2()" /> </body></html>。

6、在狮子狗节点后追加一个<li>蛮王</li> a.找到狮子狗这个节点通过id查找到狮子狗节点 var li=document.getElementById("l1") b.创建<li>蛮王</li>节点对象和内容。

$('#id').siblings() 当前元素所有的兄弟节点

$('#id').prev() 当前元素前一个兄弟节点

$('#id').prevaAll() 当前元素之前所有的兄弟节点

$('#id').next() 当前元素之后第一个兄弟节点

$('#id').nextAll() 当前元素之后所有的兄弟节点

这三个方法都可以添加选择器，给出选择条件，就能找到你指定的兄弟节点了。

1、CSS兄弟相邻选择器加号

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

CSS兄弟相邻选择器加号，举例说明

HTML代码

<p>这里是第一个P标签</p><p>这里是第二个P标签</p><h2 class = 'h2'>标题H2</h2><p>这里是第一个P标签</p><p>这里是第二个P标签</p><p>这里是第三个P标签</p><p>这里是第四个P标签</p>

CSS代码

.h2 + p{

color: red

}

2、CSS兄弟选择器~(匹配选择器)

'~'匹配所有在指定元素之后的同级某个元素

举例说明一个，CSS的匹配选择器

HTML代码

CSS代码

.h2 ~ p{

color: red

}

3、总结：

CSS中的兄弟选择符号‘~’，可以选择指定元素后的，同级的相同的所有元素。比如上面的示例，所以h2标签后的P标签全部被选择，并加入了样式

通过这两个例子，可以发现虽然这两个选择器都表示兄弟选择器，但是‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

其他选择器可参考

欢迎分享，转载请注明来源：内存溢出

jquery如何添加兄弟节点不是子节点哦 O(∩_∩)O~