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

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

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列表中追加一个蛮王英雄-->  <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>节点对象和内容。

父节点要和添加子节点差不多,但你要把父节点放在什么地方,例如放在body:

var ele=$('<div>子节点</div>')

var ele1=$('<div>父节点</div>')

$(ele1).append(ele)//把子节点放在父节点里

$(document.body).append(ele1)//把父节点放在body里

有2种方法:

最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,

第二种方式是通过给类名绑定一个事件。

1

2

3

4

5

6

7

8

9

10

11

<p id="pLabel">新加一条</p>

<ul id="ulLabel">

<li class="liLabel">aaa1</li>

<li class="liLabel">aaa2</li>

<li class="liLabel">aaa3</li>

</ul>

<script type="text/javascript">

$("#pLabel").click(function(){

$("#ulLabel").append('<li class="liLabel">aaaQ</li>')//动态像ul的末尾追加一个新元素

})

</script>

方法一:使用live

live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。

1

2

3

$('.liLabel').live('click', function(){

alert('OK')

})

方法二:使用on

可以通过on方法绑定事件,可以绑定到它的父级或者body中,实现如下:

1

2

3

4

5

6

7

$("#ulLabel").on('click','.liLabel',function(){

alert('OK')

})

或者:

$("body").on('click','.liLabel',function(){

alert('OK')

})

注意绑定的事件,需要绑定在父元素。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/7981269.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-12
下一篇 2023-04-12

发表评论

登录后才能评论

评论列表(0条)

保存