jQuery menambah elemen
Dengan jQuery, mudah untuk menambah elemen/kandungan baharu.
Menambah kandungan HTML baharu
Kami akan mempelajari empat kaedah jQuery untuk menambah kandungan baharu:
tambah() - Sisipkan kandungan di hujung elemen yang dipilih
prapend() - Sisipkan kandungan pada permulaan elemen yang dipilih
selepas() - Sisipkan kandungan selepas elemen yang dipilih
sebelum() - Sisipkan kandungan sebelum elemen yang dipilih
kaedah jQuery append()
kaedah jQuery append() menyisipkan kandungan pada penghujung elemen yang dipilih.
Instance
<!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>追加列表項</li>");
});
});
</script>
</head>
<body>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
<ol>
<li>列表項 1</li>
<li>列表項 2</li>
<li>列表項 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表項</button>
</body>
</html>Jalankan program untuk mencubanya
jQuery prepend( ) kaedah
Kaedah jQuery prepend() memasukkan kandungan pada permulaan elemen yang dipilih.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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>在開頭添加列表項</li>");
});
});
</script>
</head>
<body>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表項</button>
</body>
</html>Jalankan program untuk mencubanya
Dengan lampiran () dan Kaedah prepend() menambah beberapa elemen baharu
Dalam contoh di atas, kami hanya memasukkan teks/HTML pada permulaan/akhir elemen yang dipilih.
Walau bagaimanapun, kaedah append() dan prepend() boleh menerima bilangan elemen baharu yang tidak terhad melalui parameter. Teks/HTML boleh dijana melalui jQuery (seperti dalam contoh di atas), atau melalui kod JavaScript dan elemen DOM.
Dalam contoh berikut, kami mencipta beberapa elemen baharu. Elemen ini boleh dibuat menggunakan teks/HTML, jQuery atau JavaScript/DOM. Kami kemudian menambahkan elemen baharu ini pada teks melalui kaedah append() (juga sah untuk prepend()):
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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>這是一個段落。</p>
<button onclick="appendText()">追加文本</button>
</body>
</html>Jalankan program dan cuba
kaedah jQuery after() dan before()
kaedah jQuery after() memasukkan kandungan selepas elemen yang dipilih.
Kaedah jQuery before() memasukkan kandungan sebelum elemen yang dipilih.
Instance
<!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="/upload/course/000/000/006/580b170b612ba140.jpg" height="150" width="150">
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>Jalankan program untuk mencubanya
Menjelang selepas () dan Kaedah before() menambah beberapa elemen baharu
Kaedah after() dan before() boleh menerima elemen baharu tanpa had melalui parameter. Elemen baharu boleh dibuat melalui teks/HTML, jQuery atau JavaScript/DOM.
Dalam contoh berikut, kami mencipta beberapa elemen baharu. Elemen ini boleh dibuat menggunakan teks/HTML, jQuery atau JavaScript/DOM. Kemudian kami memasukkan elemen baharu ini ke dalam teks melalui kaedah after() (juga sah untuk before()):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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="/upload/course/000/000/006/580b170b612ba140.jpg" height="150" width="150">
<br><br>
<button onclick="afterText()">之后插入</button>
</body>
</html>Jalankan program dan cuba
