jquery在节点后后添加html,jquery如何添加节点？
jquery如何添加节点？下⾯本篇⽂章给⼤家介绍⼀下使⽤jquery添加节点的⽅法。有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对⼤家有所帮助。
jquery如何添加节点？
jQuery插⼊节点的⽅法⽅法描述⽰例append()向每个匹配的元素内部追加内容HTML代码:
我想说：
jQuery代码:
$("p").append("你好
你好");
结果:
你好
我想说：你好
appendTo()将所有匹配的元素追加到指定元素中，实际上，使⽤该⽅法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，⽽是将A追加到B中HTML代码：
我想说:
jQuery代码:
$("你好
你好").appendTo("p");
结果:
你好
我想说：你好
prepend()向每个匹配的元素内部前置内容HTML代码：
我想说：
jQuery代码：
你好");
$("p").prepend("你好
结果：
你好我想说：
你好
prependTo()将所有匹配的元素前置到指定的元素中。实际上，使⽤该⽅法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A 中，⽽是将A前置到B中HTML代码：
我想说：
jQuery代码:
$("你好
你好").prependTo("p");
结果:
你好我想说：
你好
after()在每个匹配的元素之后插⼊内容HTML代码：
我想说：
jQuery代码：
你好");
$("p").after("你好
结果：
我想说：
你好
insertAfter()将所有匹配的元素插⼊到指定元素的后⾯。实际上，使⽤该⽅法是颠倒了常规的$(A).after(B)的操作，即不是讲B插⼊到A后⾯，⽽是将A插⼊到B后⾯HTML代码：
我想说：
jQuery代码：
你好").insertAfter("p");
$("你好
结果：
我想说：
你好
before()在每个匹配的元素之前插⼊内容HTML代码：
我想说：
jQuery代码：
你好");
$("p").before("你好
结果：
你好
我想说：
insertBefore()将所有匹配的元素插⼊到指定的元素的前⾯。实际上，使⽤该⽅法是颠倒了常规的$(A).before(B)的操作，即不是将B插⼊到A前⾯，⽽是将A插⼊到B前⾯HTML代码：
我想说：
jQuery代码：
你好").insertBefore("p");
$("你好
结果：
你好
我想说：
举个例⼦来说明以上⼏种⽅法的⽤法：
序列号1
序列号2
序列号3
1、append()⽅法：var $div = '
append添加的节点
';
$('nav').append($div); //将新创建的div节点插⼊到nav容器的内容底部
jquery在一个元素后追加标签2、prepend()⽅法：var $div = '
append添加的节点
';
$('nav').append($div); //将新创建的div节点插⼊到nav容器的内容顶部
3、appendTo()⽅法：var $div = '
append添加的节点
';
var nav = $('nav');
/
/$div.appendTo($nav); //这样写是错误的
$('
append添加的节点
').appendTo($nav);//真理在这⾥。。 将新创建的节点添加到nav的内容后⾯4、prependTo()⽅法：var $div = '
append添加的节点
';
var nav = $('nav');
//$div.prependTo($nav); //和前⾯同理，这样写是错误的
$('
append添加的节点
').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中⽂⽹ ！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。