- append(content): Append content to the inner end of each matched element.
Examples:
<!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): Append each matched element node to the inner end of the specified element.
Example 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): Append content to the beginning of each matched element.
Example 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): Append each matched element node to the internal beginning of the specified element.
Example 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): insert content after a certain element
Example 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): Insert content before a matched element.
Example 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): Insert all matched elements into the back of another set of specified elements.
Example 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): Insert all matched elements in front of another set of specified elements.
Example 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>