jQuery: prepend() method
Phương thức prepend() dùng để thêm nội dung vào trước nội dung bên của những phần tử được chỉ định.
Cũng giống như append(), phương thức prepend() chỉ áp dụng được cho những thẻ đôi, tức là thẻ gồm phần thẻ mở và thẻ đóng (ví dụ như <p></p>, <section></section>, ...) mà không áp dụng được cho thẻ đơn như <img /> chẳng hạn.
Cú pháp:
$(Bộ_chọn).prepend( "Nội_dung");
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis. com/ajax/libs/jquery/1.11.1 /jquery.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("p").prepend(" <b>Prepend text</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>Prepend item</li>");
});
});
</script>
</head>
<body>
<p style="font-style:italic; color:red;"> v1study.com</p>
<p style="font-style:italic; color:green;"> demo.v1study.com</p>
<ol style="color:blue;">
<li>C</li>
<li>HTML</li>
<li>HTML5</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list items</button>
</body>
</html>
Thêm phần tử mới bằng prepend()
Ngoài tác dụng thêm nội dung như đã trình bày ở trên, ta còn có thể sử dụng prepend() để thêm vào những phần tử mới.
Phần tử mới có thể được tạo bằng HTML, jQuery hay JS/DOM.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis. com/ajax/libs/jquery/1.11.1 /jquery.min.js"></script>
<script>
function appendText(){
var txt1 = "<p>Text1</p>"; //Tạo phần tử mới bằng HTML
var txt2 = $("<p></p>").text("Text2"); //Tạo phần tử mới bằng jQuery
var txt3 = document.createElement( "p");
txt3.innerHTML = "Text3"; //Tạo phần tử mới bằng DOM
$("section").prepend(txt1, txt2, txt3); // Append new elements
}
</script>
</head>
<body>
<section style="color:red; font-weight:bold;">v1study.com</section>
<button onclick="appendText();"> Prepend text</button>
</body>
</html>