การใช้งาน method append() เป็นการแทรกเนื้อหาที่ระบุไว้ในตอนท้ายขององค์ประกอบที่เลือก
เคล็ดลับ: เมื่อต้องการแทรกเนื้อหาที่จุดเริ่มต้นขององค์ประกอบที่เลือกให้ใช้เมธอด
prepend()
รูปแบบการเขียน Syntax
โค้ด: เลือกทั้งหมด
$(selector).append(content,function(index,html))
- content คือ ต้องระบุเนื้อหาท่ต้องการจะแทรก (สามารถมีแท็ก HTML ได้) ค่าที่เป็นไปได้ ก็จะมีพวก องค์ประกอบของ HTML วัตถุประสงค์ของ jQuery และองค์ประกอบของ DOM
function(index,html) คือ ระบุฟังก์ชันที่ส่งกลับเนื้อหาที่ต้องการจะแทรก
- index - แสดงตำแหน่งของ องค์ประกอบใน set นั้น
Html - ส่งกลับ HTML ปัจจุบันขององค์ประกอบที่เราเลือก
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<!--link button-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--script method append()-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--script button-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>ยินดีต้อนรับ Append!</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>สวัสดี Append!</li>");
});
});
</script>
</head>
<body>
<p>ตัวอย่างการใช้งาน method append()</p>
<ol>
<li>Hello A!</li>
<li>Hello B!</li>
<li>Hello C!</li>
</ol>
<button id="btn1" class="btn btn-info">ยินดีต้อนรับ Append!</button>
<button id="btn2" class="btn btn-warning">สวัสดี Append!</button>
</body>
</html>
- yghj.JPG (26.75 KiB) Viewed 2413 times
จากภาพจะเป็นได้ว่าเมื่อเราคลิกที่ปุ่มแรกข้อความก็ขึ้นตามที่ไฮไลแถวบน แล้วเมื่อเราคลิปปุ่มที่ 2 ข้อความก็จะแทรกเป็น list ต่อๆลงมาตามที่ไฮไลในส่งด้านล่าง
อ้างอิง :
https://www.w3schools.com/jquery/html_append.asp
https://www.w3schools.com/jquery/tryit. ... append_ref
https://www.w3schools.com/bootstrap/try ... &stacked=h
[b]การใช้งาน method append()[/b] เป็นการแทรกเนื้อหาที่ระบุไว้ในตอนท้ายขององค์ประกอบที่เลือก
[quote][b]เคล็ดลับ:[/b] เมื่อต้องการแทรกเนื้อหาที่จุดเริ่มต้นขององค์ประกอบที่เลือกให้ใช้เมธอด [url=https://www.google.co.th/search?hl=th&ei=HdZWWueIHsznvgSUsobYBg&q=prepend%28%29&oq=prepend%28%29&gs_l=psy-ab.3..0i19k1l2j0i30i19k1l8.2058130.2297036.0.2297754.2.2.0.0.0.0.183.308.0j2.2.0....0...1.1.64.psy-ab..0.2.306...0.0.y5VU9aUcwT0]prepend()[/url][/quote]
[b]รูปแบบการเขียน Syntax[/b]
[code]$(selector).append(content,function(index,html))[/code]
[list][b]content [/b] คือ ต้องระบุเนื้อหาท่ต้องการจะแทรก (สามารถมีแท็ก HTML ได้) ค่าที่เป็นไปได้ ก็จะมีพวก องค์ประกอบของ HTML วัตถุประสงค์ของ jQuery และองค์ประกอบของ [url=https://www.google.co.th/search?hl=th&ei=FNZWWvnyD4HovAT6666wDQ&q=DOM&oq=DOM&gs_l=psy-ab.3..35i39k1l2j0j0i131k1j0l6.7088.7858.0.8214.2.2.0.0.0.0.140.236.1j1.2.0....0...1.1.64.psy-ab..0.2.234....0.UPbvRWtEeeo]DOM[/url]
[b]function(index,html)[/b] คือ ระบุฟังก์ชันที่ส่งกลับเนื้อหาที่ต้องการจะแทรก
[list][b]index[/b] - แสดงตำแหน่งของ องค์ประกอบใน set นั้น
[b]Html[/b] - ส่งกลับ HTML ปัจจุบันขององค์ประกอบที่เราเลือก[/list][/list]
[b]ตัวอย่าง[/b]
[code]<!DOCTYPE html>
<html>
<head>
<!--link button-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--script method append()-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--script button-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>ยินดีต้อนรับ Append!</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>สวัสดี Append!</li>");
});
});
</script>
</head>
<body>
<p>ตัวอย่างการใช้งาน method append()</p>
<ol>
<li>Hello A!</li>
<li>Hello B!</li>
<li>Hello C!</li>
</ol>
<button id="btn1" class="btn btn-info">ยินดีต้อนรับ Append!</button>
<button id="btn2" class="btn btn-warning">สวัสดี Append!</button>
</body>
</html>[/code]
[b]ผลลัพธ์[/b]
[attachment=0]yghj.JPG[/attachment]
จากภาพจะเป็นได้ว่าเมื่อเราคลิกที่ปุ่มแรกข้อความก็ขึ้นตามที่ไฮไลแถวบน แล้วเมื่อเราคลิปปุ่มที่ 2 ข้อความก็จะแทรกเป็น list ต่อๆลงมาตามที่ไฮไลในส่งด้านล่าง
อ้างอิง : [url]https://www.w3schools.com/jquery/html_append.asp[/url]
[url]https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append_ref[/url]
[url]https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_styles&stacked=h[/url]