- append(content):向每个匹配的元素的内部的结尾处追加内容。
实例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插入节点</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="fruit">
<li title="pg">苹果</li>
<li title="jz">橘子</li>
<li title="xj">香蕉</li>
</ul>
<script>
$(function(){
var $bl=$("<li title='bl'>菠萝</li>");
var $ul=$("#fruit");
$ul.append($bl);
})
</script>
</body>
</html>
- appendTo(content):将每个匹配的元素节点追加到指定的元素中的内部结尾处。
实例2:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插入节点</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="fruit">
<li title="pg">苹果</li>
<li title="jz">橘子</li>
<li title="xj">香蕉</li>
</ul>
<script>
$(function(){
var $bl=$("<li title='bl'>菠萝</li>");
var $ul=$("#fruit");
$bl.appendTo($ul);
})
</script>
</body>
</html>
- prepend(content): 向每个匹配的元素的内部的开始处追加内容。
实例3:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插入节点</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="fruit">
<li title="pg">苹果</li>
<li title="jz">橘子</li>
<li title="xj">香蕉</li>
</ul>
<script>
$(function(){
var $bl=$("<li title='bl'>菠萝</li>");
var $ul=$("#fruit");
$ul.prepend($bl);
})
</script>
</body>
</html>
- prependTo(content): 将每个匹配的元素节点追加到指定的元素中的内部开始处。
实例4:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插入节点</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="fruit">
<li title="pg">苹果</li>
<li title="jz">橘子</li>
<li title="xj">香蕉</li>
</ul>
<script>
$(function(){
var $bl=$("<li title='bl'>菠萝</li>");
var $ul=$("#fruit");
$bl.prependTo($ul);
})
</script>
</body>
</html>
- after(content):在某个元素之后插入内容
实例5:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插入节点</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="fruit">
<li title="pg">苹果</li>
<li title="jz">橘子</li>
<li title="xj">香蕉</li>
</ul>
<script>
$(function(){
var $bl=$("<li title='bl'>菠萝</li>");
var $ul=$("#fruit");
$ul.after($bl);
})
</script>
</body>
</html>
- before(content):在某个匹配元素的之前插入内容
实例6:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插入节点</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="fruit">
<li title="pg">苹果</li>
<li title="jz">橘子</li>
<li title="xj">香蕉</li>
</ul>
<script>
$(function(){
var $bl=$("<li title='bl'>菠萝</li>");
var $ul=$("#fruit");
$bl.insertAfter($ul);
})
</script>
</body>
</html>
- insertAfter(content):把所有匹配的元素插入到另一个指定元素集合的后面。
实例7:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插入节点</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="fruit">
<li title="pg">苹果</li>
<li title="jz">橘子</li>
<li title="xj">香蕉</li>
</ul>
<script>
$(function(){
var $bl=$("<li title='bl'>菠萝</li>");
var $ul=$("#fruit");
$bl.insertBefore($ul);
})
</script>
</body>
</html>
- inertBefore(content): 把所有匹配的元素插入到另一个指定元素集合的前面。
实例8:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插入节点</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="fruit">
<li title="pg">苹果</li>
<li title="jz">橘子</li>
<li title="xj">香蕉</li>
</ul>
<script>
$(function(){
var $bl=$("<li title='bl'>菠萝</li>");
var $ul=$("#fruit");
$ul.before($bl);
})
</script>
</body>
</html>