รูปแบบการเขียน Syntaxเคล็ดลับ: เมื่อต้องการแทรกเนื้อหาที่จุดเริ่มต้นขององค์ประกอบที่เลือกให้ใช้เมธอด prepend()
โค้ด: เลือกทั้งหมด
$(selector).append(content,function(index,html))
- content คือ ต้องระบุเนื้อหาท่ต้องการจะแทรก (สามารถมีแท็ก HTML ได้) ค่าที่เป็นไปได้ ก็จะมีพวก องค์ประกอบของ HTML วัตถุประสงค์ของ jQuery และองค์ประกอบของ DOM
function(index,html) คือ ระบุฟังก์ชันที่ส่งกลับเนื้อหาที่ต้องการจะแทรก- index - แสดงตำแหน่งของ องค์ประกอบใน set นั้น
Html - ส่งกลับ HTML ปัจจุบันขององค์ประกอบที่เราเลือก
- index - แสดงตำแหน่งของ องค์ประกอบใน set นั้น
โค้ด: เลือกทั้งหมด
<!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>
อ้างอิง : https://www.w3schools.com/jquery/html_append.asp
https://www.w3schools.com/jquery/tryit. ... append_ref
https://www.w3schools.com/bootstrap/try ... &stacked=h