正文
jquery动态添加DOM节点
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1、append()方法：向每个匹配的元素内部添加元素
appendTo()方法：将所有匹配的元素追加的指定的元素中
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jquery选择器</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>梨</li>
</ul>
</body>
<script type="text/javascript">
var $li1=$("<li>柚子</li>");
$("ul").append($li1);
var $li2=$("<li>哈密瓜</li>");
$li2.appendTo("ul");
</script> </html>
2、prepend()方法：向所有匹配的元素前面添加新的元素
prependTo()方法：将元素添加到指定元素的前面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jquery选择器</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>梨</li>
</ul>
</body>
<script type="text/javascript">
var $p=$("<p>请选择你喜欢的水果</p>");
$("ul").prepend($p); $p.prependTo("ul");
</script>
</html>
3、after()：在每个匹配的元素之后添加元素
insertAfter()：将元素插入到指定元素的后面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jquery选择器</title>
</head>
<body>
<p>请选择你喜欢的水果</p>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>梨</li>
</ul>
</body>
<script type="text/javascript">
var $b=$("<b>您的选择是</b>");
$("p").after($b); $b.insertAfter("p");
</script>
</html>
4、before() 在匹配的元素之前添加元素，效果同prepend()
insertBefore() 将元素添加到指定元素之前，效果同prependTo()
