jquery如何添加节点?

jquery如何添加节点?下面本篇文章给大家介绍一下使用jquery添加节点的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

jquery如何添加节点?

jQuery插入节点的方法

方法描述示例
append()向每个匹配的元素内部追加内容

HTML代码:

<p>我想说:</p>

jQuery代码:

$("p").append("<b>你好</b>");

结果:

<p>我想说:<b>你好</b></p>

appendTo()将所有匹配的元素追加到指定元素中,实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中

HTML代码:

<p>我想说:</p>

jQuery代码:

$("<b>你好</b>").appendTo("p");

结果:

<p>我想说:<b>你好</b></p>

prepend()向每个匹配的元素内部前置内容

HTML代码:

<p>我想说:</p>

jQuery代码:

$("p").prepend("<b>你好</b>");

结果:

<p><b>你好</b>我想说:</p>

prependTo()将所有匹配的元素前置到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).prepend(B)的操作,即不是将B前置到A中,而是将A前置到B中

HTML代码:

<p>我想说:</p>

jQuery代码:

$("<b>你好</b>").prependTo("p");

结果:

<p><b>你好</b>我想说:</p>

after()在每个匹配的元素之后插入内容

HTML代码:

<p>我想说:</p>

jQuery代码:

$("p").after("<b>你好</b>");

结果:

<p>我想说:</p><b>你好</b>

insertAfter()将所有匹配的元素插入到指定元素的后面。实际上,使用该方法是颠倒了常规的$(A).after(B)的操作,即不是讲B插入到A后面,而是将A插入到B后面

HTML代码:

<p>我想说:</p>

jQuery代码:

$("<b>你好</b>").insertAfter("p");

结果:

<p>我想说:</p><b>你好</b>

before()在每个匹配的元素之前插入内容

HTML代码:

<p>我想说:</p>

jQuery代码:

$("p").before("<b>你好</b>");

结果:

<b>你好</b><p>我想说:</p>

insertBefore()将所有匹配的元素插入到指定的元素的前面。实际上,使用该方法是颠倒了常规的$(A).before(B)的操作,即不是将B插入到A前面,而是将A插入到B前面

HTML代码:

<p>我想说:</p>

jQuery代码:

$("<b>你好</b>").insertBefore("p");

结果:

<b>你好</b><p>我想说:</p>

举个例子来说明以上几种方法的用法:

<nav>
    <ul>
        <li>序列号1</li>
        <li>序列号2</li>
        <li>序列号3</li>
    </ul>
</nav>

1、append()方法:

var $div = '<div>append添加的节点</div>';
$('nav').append($div); //将新创建的div节点插入到nav容器的内容底部

2、prepend()方法:

var $div = '<div>append添加的节点</div>';
$('nav').append($div); //将新创建的div节点插入到nav容器的内容顶部

3、appendTo()方法:

var $div = '<div>append添加的节点</div>';
var nav = $('nav');
//$div.appendTo($nav);  //这样写是错误的

$('<div>append添加的节点</div>').appendTo($nav);//真理在这里。。  将新创建的节点添加到nav的内容后面

4、prependTo()方法:

var $div = '<div>append添加的节点</div>';
var nav = $('nav');
//$div.prependTo($nav);  //和前面同理,这样写是错误的 
$('<div>append添加的节点</div>').appendTo($nav);//真理在这里。。  将新创建的节点添加到nav的内容的前面

5、after()方法

var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_2.after($l_1);  //这里可以这么理解,第2个li后面跟着第1个li。

6、before()方法:

var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_1.before($l_2);  //这里可以这么理解,第1个li前面是第2个li。

7、insertBefore()方法:

var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_2.insertBefore($l_1);  //将第2个li插入到第1个li前面

8、insertAfter()方法:

var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_1.insertAfter($l_2);  //将第1个li插入到第2个li后面

容易出现问题的地方在 appendTo()和preappendTo()。

更多web前端知识,请查阅 HTML中文网 !!

以上就是jquery如何添加节点?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏