jQuery 插入元素
内部插入
append()方法
语法格式
- append(内容)
- Append(function(index,html))
该方法在匹配元素集合的每个元素末尾插入由参数指定的内容并返回jQuery对象。
html
<button>按钮</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
js
$(function(){
$("button").click(function(){
$("div").append("<h1>this is H1</h1>");
})
})
单击完按钮得到的html结构
<button>按钮</button>
<div class="b">
<h2>this 我是h2</h2>
<h1>this is H1</h1>
</div>
prepend()方法
语法格式
- prepend(内容)
此方法将参数指定的内容插入匹配元素集合中每个元素的开头并返回jQuery对象。
html
<button>按钮</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<div class="c">
<h2>this c 里面的h2</h2>
</div>
js
$(function(){
$("button").click(function(){
$("div").prepend("<h1>this is H1</h1>");
})
})
单击完按钮得到的html结构
<button>按钮</button>
<div class="b">
<h1>this is H1</h1>
<h2>this 我是h2</h2>
</div>
<div class="c">
j<h1>this is H1</h1>
<h2>this c 里面的h2</h2>
</div>
prependTo()方法
语法格式
- prependTo(target)
此方法将匹配元素集合中的每个元素插入目标元素的开头并返回jQuery对象。
html
<button>按钮</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
js
$(function(){
$("button").click(function(){
$("<p>我要上天</p>").prependTo($("div"));
})
})
单击完按钮得到的html结构
<button>按钮</button>
<div class="b">
<p>我要上天</p>
<h2>this 我是h2</h2>
</div>