Người Viết : ViKiMi Editor

Sử dụng phương thức Append, Prepend, After, Before tạo các phần tử & văn bản trên Website
Khi bắt đầu thiết kế Website chắc hẳn bạn đã tính đến việc xây dựng một Website đảm bảo có thời gian hoạt động lâu. Một Website như vậy sẽ luôn có các phần tử được tạo ra và xoá đi theo yêu cầu của phát triển. Tất nhiên, tất cả đều được thao tác bằng câu lệnh và các trường hợp điều kiện tiêu chuẩn. Các phần tử có thể được thêm vào bằng các cách thức khác nhau.
Thư viện jQuery giúp bạn thực hiện việc THÊM hoặc XOÁ các phần tử trên một Website thật dễ dàng. Những câu lệnh thật đơn giản dễ hiểu.
CHÚNG TA SẼ ĐỀ CẬP ĐẾN VIỆC THÊM CÁC PHẦN TỬ VÀO NỘI DUNG WEBSITE.
Các phương thức đề cập đến :
+ append() – Chèn nội dung mới vào cuối, bên trong thân phần tử được chọn
+ prepend() – Chèn nội dung mới vào đầu, bên trong thân phần tử được chọn
+ after() – Chèn nội dung mới vào phía sau các phần tử đã chọn
+ before() – Chèn nội dung mới vào phía trước các phần tử được chọn
A ] PHƯƠNG THỨC Append()
Phương thức này rất hiệu quả khi bạn muốn thêm nội dung mới ( Bao gồm các phần tử HTML mới hoặc văn bản mới … ) vào cuối, bên trong thân phần tử HTML được chọn.
Phương thức này cho phép bạn sử dụng một hoặc nhiều tham số.
+ EXAMPLE :: Sử dụng một tham số
jQUERY ::
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1") .click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2") .click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
HTML ::
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
HÌNH ẢNH KẾT QUẢ ::
+ Khi thực hiện kích chuột vào button

View HTML Source Code ::

+ EXAMPLE :: Sử dụng nhiều tham số
jQUERY ::
<script>
function appendText() {
/* Create text with HTML */
var txt1 = "<p>Text.</p>";
/* Create text with jQuery */
var txt2 = $("<p></p>").text("Text.");
/* Create Element with HTML */
var txt3 = document. createElement ("p");
/* Create text with DOM */
txt3.innerHTML = "Text.";
/**
* Append new elements
*/
$("body"). append(txt1, txt2, txt3);
}
</script>
HTML ::
<body>
<p> ĐÂY LÀ VĂN BẢN. </p>
<button onclick = "appendText()" > Append text </button>
</body>
+ Khi thực hiện kích chuột vào button
View HTML Source Code ::

B ] PHƯƠNG THỨC Prepend()
Phương thức này rất hiệu quả khi bạn muốn thêm nội dung mới ( Bao gồm các phần tử HTML mới hoặc văn bản mới … ) vào trước, bên trong thân phần tử HTML được chọn.
Phương thức này cho phép bạn sử dụng một hoặc nhiều tham số.
+ EXAMPLE :: Sử dụng một tham số
jQUERY ::
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready (function(){
$("#btn1"). click( function(){
$("p").prepend( "<b>Prepended text </b>. " );
});
$("#btn2"). click( function(){
$("ol").prepend( "<li><b>Prepended item </b></li>" );
});
});
</script>
HTML ::
<body>
<p>This is a paragraph. </p>
<p>This is another paragraph. </p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list items</button>
</body>
HÌNH ẢNH KẾT QUẢ ::
+ Khi thực hiện kích chuột vào button

View HTML Source Code ::

+ EXAMPLE :: Sử dụng nhiều tham số
Cũng tương tự như ở phương thức Append()
C ] PHƯƠNG THỨC After()
Phương thức này rất hiệu quả khi bạn muốn thêm nội dung mới ( Bao gồm các phần tử HTML mới hoặc văn bản mới … ) vào phía SAU các phần tử HTML được chọn.
Phương thức này cho phép bạn sử dụng một hoặc nhiều tham số.
+ EXAMPLE :: Sử dụng một tham số
jQUERY ::
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("div").after("<br/><i>After</i>");
});
});
</script>
HTML ::
<body>
<div>Make a Website (with Your Ideas)</div><br><br>
<button id="btn">Insert after</button>
</body>
HÌNH ẢNH KẾT QUẢ ::
+ Khi thực hiện kích chuột vào button

View HTML Source Code ::

+ EXAMPLE :: Sử dụng nhiều tham số
Kết quả trong trường hợp này cũng giống như các trường hợp khác. Tuy nhiên, việc tạo ra lần này các phần tử HTML sẽ có cấu trúc DOM khác hoàn toàn. Do vậy sẽ tốt cho các trường hợp sử dụng Code khác nhau.
Bạn có thể xem tương tự với View HTML Source Code
<script>
function afterText() {
/** Create element with HTML **/
var txt1 = "<b>I </b>";
/** Create with jQuery **/
var txt2 = $("<i></i>").text("love ");
/** Create with DOM **/
var txt3 = document.createElement("b");
txt3.innerHTML = "jQuery!";
/**
* Insert new elements after img
*/
$("img").after(txt1, txt2, txt3);
}
</script>
HÌNH ẢNH KẾT QUẢ ::
+ Khi thực hiện kích chuột vào button

View HTML Source Code ::

D ] PHƯƠNG THỨC Before()
Phương thức này rất hiệu quả khi bạn muốn thêm nội dung mới ( Bao gồm các phần tử HTML mới hoặc văn bản mới … ) vào phía TRƯỚC các phần tử HTML được chọn.
Phương thức này cho phép bạn sử dụng một hoặc nhiều tham số.
+ EXAMPLE :: Sử dụng một tham số
jQUERY ::
< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("div").before("<b>Before</b><br><br>");
});
});
</script>
HTML ::
<body>
<div>Make a Website (with Your Ideas)</div><br><br>
<button id="btn">Insert Before</button>
</body>
HÌNH ẢNH KẾT QUẢ ::
+ Khi thực hiện kích chuột vào button

View HTML Source Code ::

+ EXAMPLE :: Sử dụng nhiều tham số
Cũng tương tự như ở phương thức After()
Nhưng phương thức trên đây cho phép bạn tạo các phần tử HMTL và Văn Bản thật dễ dàng. Việc vận dụng có thể theo cách xử lý CODE cần của bạn. Bạn có thể hiểu cấu trúc HTML được tạo ra tại [ View HTML Source Code ] để đưa ra các vận dụng phù hợp.