jQuery - Tambah elemen


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 pada penghujung elemen yang dipilih

  • prepend() - 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>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

kaedah jQuery prepend()

jQuery prepend() ) kaedah dalam Sisipkan kandungan pada permulaan elemen yang dipilih.

Instance

<!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>在开头添加列表项</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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Tambah beberapa elemen baharu melalui kaedah append() dan prepend()

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>菜鸟教程(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 标签创建文本
	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 Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

kaedah jQuery selepas () dan sebelum()

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="/images/logo.png" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Tambah beberapa elemen baharu melalui kaedah selepas() dan sebelum()

Kaedah selepas() dan sebelum() boleh menerima nombor tanpa had elemen baharu 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()):

Instance

<!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 创建元素
	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="/images/logo.png" >
<br><br>
<button onclick="afterText()">之后插入</button>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian