Hướng dẫn append element javascript - nối thêm phần tử javascript

Question

Trang chủ
Tham khảo
jQuery
jQuery - function
.append()

Nội dung chính Show

Định nghĩa và sử dụng
Cấu trúc
.append(nội dung)nội dung)
Thành phần div nội dung thêm vào
thành phần h3
thành phần h3
.append(function(index){...})
Side note, for your case, there is no way called safety to convert strings to scripts because somebody may inject malicious scripts into your strings and execute them without your notice, so you need to make sure all your strings are under your control properly. You can check XSS attack for a better understanding.
Nick VuNick Vu
If your are sure about <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('div').append($('h3')); }); </script> </head> <body> <div> <h3>thành phần h3</h3> <p>thành phần p</p> </div> </body> </html>1 content is <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('div').append($('h3')); }); </script> </head> <body> <div> <h3>thành phần h3</h3> <p>thành phần p</p> </div> </body> </html>2 and contains a string with valid HTML you can use Range.createContextualFragment() (executes scripts 🚨)
Ví dụ thêm
thành phần h3
thành phần h3
.append(function(index){...})

Định nghĩa và sử dụng

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

6 Chèn nội dung, di chuyển thành phần vào trong thành phần khác, nội dung này thường được sắp xếp ở vị trí sau cùng.

Cấu trúc

Đã được thêm vào từ phiên bản 1.0

.append(nội dung)nội dung)

$('div').append('<p>nội dung thêm vào</p>');
$('div').append($('h3'));

Đã được thêm vào từ phiên bản 1.4

.append(nội dung)nội dung)

Đã được thêm vào từ phiên bản 1.4

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

Html viết:

Hiển thị trình duyệt:append thì thành phần div được chèn thêm thành phần

nội dung thêm vào

vào ngay vị trí sau cùng của thành phần div.

Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng append thì thành phần div được chèn thêm thành phần nội dung thêm vào vào ngay vị trí sau cùng của thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery

Sau khi có jQuery

Thành phần div

nội dung thêm vào

Thành phần div nội dung thêm vào

Đã được thêm vào từ phiên bản 1.4

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append($('h3'));
});
</script>
</head>

<body>
<div>
<h3>thành phần h3</h3>
<p>thành phần p</p>
</div>
</body>
</html>

Html viết:

Hiển thị trình duyệt:

Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng append thì thành phần div được chèn thêm thành phần nội dung thêm vào vào ngay vị trí sau cùng của thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery

Sau khi có jQuery

thành phần h3

thành phần p

Thành phần div

thành phần p

thành phần h3

.append(function(index){...})

Đã được thêm vào từ phiên bản 1.4

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append(function() {
        return '<p>' + this.className + '</p>';
    });
});
</script>
</head>

<body>
<div class="test01">thành phần div 01</div>
<div class="test02">thành phần div 02</div>
</body>
</html>

Html viết:

Hiển thị trình duyệt:

Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng append thì thành phần div được chèn thêm thành phần nội dung thêm vào vào ngay vị trí sau cùng của thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery

Sau khi có jQuery

thành phần div 02

Thành phần div

test01

thành phần div 02

test02

Mr. Polywhirl
36.6k12 gold badges76 silver badges124 bronze badges
asked Apr 11 at 16:27

You can use

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

9 to execute your scripts under string formats. jQuery also uses

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

9 in some parts of DOM manipulation under the hood.

.append()

Side note, for your case, there is no way called safety to convert strings to scripts because somebody may inject malicious scripts into your strings and execute them without your notice, so you need to make sure all your strings are under your control properly. You can check XSS attack for a better understanding.

answered Apr 11 at 16:53

Nick VuNick Vu

11.9k2 gold badges17 silver badges27 bronze badges

If your are sure about

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append($('h3'));
});
</script>
</head>

<body>
<div>
<h3>thành phần h3</h3>
<p>thành phần p</p>
</div>
</body>
</html>

1 content is
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('div').append($('h3')); }); </script> </head> <body> <div> <h3>thành phần h3</h3> <p>thành phần p</p> </div> </body> </html>
2 and contains a string with valid HTML you can use Range.createContextualFragment() (executes scripts 🚨)nội dung)

$('div').append('<p>nội dung thêm vào</p>');
$('div').append($('h3'));

Working example

If your are sure about <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('div').append($('h3')); }); </script> </head> <body> <div> <h3>thành phần h3</h3> <p>thành phần p</p> </div> </body> </html>1 content is <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('div').append($('h3')); }); </script> </head> <body> <div> <h3>thành phần h3</h3> <p>thành phần p</p> </div> </body> </html>2 and contains a string with valid HTML you can use Range.createContextualFragment() (executes scripts 🚨)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

Hiển thị trình duyệt:

Ban đầu thành phần h3 nằm trong thành phần div ở vị trí đầu, nhưng khi sử dụng append thì thành phần h3 được di chuyển ngay vị trí sau cùng của thành phần div.append thì thành phần div được chèn thêm thành phần

nội dung thêm vào

vào ngay vị trí sau cùng của thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery

Sau khi có jQuery

Thành phần div

Thành phần div nội dung thêm vào

nội dung thêm vào

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append($('h3'));
});
</script>
</head>

<body>
<div>
<h3>thành phần h3</h3>
<p>thành phần p</p>
</div>
</body>
</html>

Hiển thị trình duyệt:

Ban đầu thành phần h3 nằm trong thành phần div ở vị trí đầu, nhưng khi sử dụng append thì thành phần h3 được di chuyển ngay vị trí sau cùng của thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery

Sau khi có jQuery

Thành phần div

thành phần h3

thành phần p

Thành phần div nội dung thêm vào

thành phần p

thành phần h3

.append(function(index){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append(function() {
        return '<p>' + this.className + '</p>';
    });
});
</script>
</head>

<body>
<div class="test01">thành phần div 01</div>
<div class="test02">thành phần div 02</div>
</body>
</html>

Hiển thị trình duyệt:

Ban đầu thành phần h3 nằm trong thành phần div ở vị trí đầu, nhưng khi sử dụng append thì thành phần h3 được di chuyển ngay vị trí sau cùng của thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery

Sau khi có jQuery

Thành phần div

thành phần div 02

ThànH Phần Div 01 Test01 ThànH Phần Div 02 TEST02

test01

thành phần div 02

test02

Ví dụ,

var newElement = document.createElement('div');
newElement.innerHTML = "<p>new content</p><script>alert('Hello World!')</script>";
element.appendChild(newElement);

Kết quả: "Nội dung mới" được thêm vào trong trang nhưng sẽ không có cảnh giác nào nói Hello World!

Tôi đã thử InsideHtml, InsertAdjacenthtml, Phụ lục, Phương pháp phụ lục. Nhưng vấn đề là JS và CSS không tải động.

Trong jQuery,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

8 hoạt động 👍🏻

$(selector).after("<p>new content</p><script>alert('Hello World!')</script>");

Có bất kỳ tương đương cho JavaScript thuần túy?

Ông Polywhirl

36.6K12 Huy hiệu vàng76 Huy hiệu bạc124 Huy hiệu đồng12 gold badges76 silver badges124 bronze badges

Hỏi ngày 11 tháng 4 lúc 16:27Apr 11 at 16:27

Bạn có thể sử dụng

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

9 để thực thi các tập lệnh của mình dưới các định dạng chuỗi. JQuery cũng sử dụng

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

9 trong một số phần của thao tác DOM dưới mui xe.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

0

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

1

Lưu ý bên, đối với trường hợp của bạn, không có cách nào được gọi là an toàn để chuyển đổi các chuỗi thành tập lệnh vì ai đó có thể đưa các tập lệnh độc hại vào chuỗi của bạn và thực hiện chúng mà không cần thông báo của bạn, vì vậy bạn cần đảm bảo tất cả các chuỗi của bạn nằm dưới sự kiểm soát của bạn. Bạn có thể kiểm tra tấn công XSS để hiểu rõ hơn.safety to convert strings to scripts because somebody may inject malicious scripts into your strings and execute them without your notice, so you need to make sure all your strings are under your control properly. You can check XSS attack for a better understanding.

Đã trả lời ngày 11 tháng 4 lúc 16:53Apr 11 at 16:53

Nick Vunick VuNick Vu

11.9k2 Huy hiệu vàng17 Huy hiệu bạc27 Huy hiệu đồng2 gold badges17 silver badges27 bronze badges

0

Nếu bạn chắc chắn về nội dung

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append($('h3'));
});
</script>
</head>

<body>
<div>
<h3>thành phần h3</h3>
<p>thành phần p</p>
</div>
</body>
</html>

1 là

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append($('h3'));
});
</script>
</head>

<body>
<div>
<h3>thành phần h3</h3>
<p>thành phần p</p>
</div>
</body>
</html>

2 và chứa một chuỗi có HTML hợp lệ, bạn có thể sử dụng phạm vi.CreateContextualFragment () (thực thi các tập lệnh 🚨)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

2

Ví dụ làm việc

Đã trả lời ngày 16 tháng 4 lúc 22:05Apr 16 at 22:05

Lissettdmlissettdmlissettdm

10,9k1 Huy hiệu vàng12 Huy hiệu bạc35 Huy hiệu đồng1 gold badge12 silver badges35 bronze badges

Bạn phải gọi cảnh báo của mình khi có điều gì đó xảy ra, nếu bạn muốn cảnh báo được hiển thị khi bạn nối HTML, sau đó bọc nó trong chức năng tự thực hiện:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

3

Đã trả lời ngày 11 tháng 4 lúc 16:32Apr 11 at 16:32

2

Các tập lệnh không thể được thêm trực tiếp vào DOM dưới dạng văn bản HTML và được thực thi. Tôi sẽ tách hành động thành hai giai đoạn. Chèn HTML và thêm tập lệnh vào phần cuối của thân tài liệu dưới dạng một đoạn ngữ cảnh.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

4

Logic này đã được mượn từ câu trả lời của Tilak Maddy trong một câu hỏi liên quan.

Đã trả lời ngày 11 tháng 4 lúc 16:51Apr 11 at 16:51

Ông Polywhirlmr. PolywhirlMr. Polywhirl

36.6K12 Huy hiệu vàng76 Huy hiệu bạc124 Huy hiệu đồng12 gold badges76 silver badges124 bronze badges

Hỏi ngày 11 tháng 4 lúc 16:27

Bạn có thể sử dụng

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

9 để thực thi các tập lệnh của mình dưới các định dạng chuỗi. JQuery cũng sử dụng

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

9 trong một số phần của thao tác DOM dưới mui xe.

Lưu ý bên, đối với trường hợp của bạn, không có cách nào được gọi là an toàn để chuyển đổi các chuỗi thành tập lệnh vì ai đó có thể đưa các tập lệnh độc hại vào chuỗi của bạn và thực hiện chúng mà không cần thông báo của bạn, vì vậy bạn cần đảm bảo tất cả các chuỗi của bạn nằm dưới sự kiểm soát của bạn. Bạn có thể kiểm tra tấn công XSS để hiểu rõ hơn.
Đã trả lời ngày 11 tháng 4 lúc 16:53

Nick Vunick Vu

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

5

marc_s

11.9k2 Huy hiệu vàng17 Huy hiệu bạc27 Huy hiệu đồng171 gold badges1315 silver badges1433 bronze badges

Nếu bạn chắc chắn về nội dung

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append($('h3'));
});
</script>
</head>

<body>
<div>
<h3>thành phần h3</h3>
<p>thành phần p</p>
</div>
</body>
</html>

1 là

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').append($('h3'));
});
</script>
</head>

<body>
<div>
<h3>thành phần h3</h3>
<p>thành phần p</p>
</div>
</body>
</html>

2 và chứa một chuỗi có HTML hợp lệ, bạn có thể sử dụng phạm vi.CreateContextualFragment () (thực thi các tập lệnh 🚨)Apr 11 at 16:49