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中文网(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中文网(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 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 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中文网(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 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
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
bahagian seterusnya