jQuery - 添加元素
jQuery - 添加元素
通過 jQuery，可以很容易地添加新元素/內(nèi)容。
添加新的 HTML 內(nèi)容
我們將學(xué)習(xí)用于添加新內(nèi)容的四個(gè) jQuery 方法：
append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容
jQuery append() 方法
jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>追加文本</b>。");
});
$("#btn2").click(function(){
$("ol").append("<li>追加列表項(xiàng)</li>");
});
});
</script>
</head>
<body>
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表項(xiàng)</button>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
jQuery prepend() 方法
jQuery prepend() 方法在被選元素的開頭插入內(nèi)容。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在開頭追加文本</b>。 ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>在開頭添加列表項(xiàng)</li>");
});
});
</script>
</head>
<body>
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表項(xiàng)</button>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
通過 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我們只在被選元素的開頭/結(jié)尾插入文本/HTML。
不過，append() 和 prepend() 方法能夠通過參數(shù)接收無限數(shù)量的新元素?？梢酝ㄟ^ jQuery 來生成文本/HTML（就像上面的例子那樣），或者通過 JavaScript 代碼和 DOM 元素。
在下面的例子中，我們創(chuàng)建若干個(gè)新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。然后我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText(){
var txt1="<p>文本。</p>"; // 使用 HTML 標(biāo)簽創(chuàng)建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 創(chuàng)建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>這是一個(gè)段落。</p>
<button onclick="appendText()">追加文本</button>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
jQuery after() 和 before() 方法
jQuery after() 方法在被選元素之后插入內(nèi)容。
jQuery before() 方法在被選元素之前插入內(nèi)容。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("img").after("<i>之后</i>");
});
});
</script>
</head>
<body>
<img src="/images/logo.png" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
通過 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能夠通過參數(shù)接收無限數(shù)量的新元素?？梢酝ㄟ^ text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建新元素。
在下面的例子中，我們創(chuàng)建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。然后我們通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function afterText(){
var txt1="<b>I </b>"; // 使用 HTML 創(chuàng)建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 創(chuàng)建元素
var txt3=document.createElement("big"); // 使用 DOM 創(chuàng)建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在圖片后添加文本
}
</script>
</head>
<body>
<img src="/images/logo.png" >
<br><br>
<button onclick="afterText()">之后插入</button>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例