Định nghĩa và sử dụng
Cấu trúc
.append(nội dung)nội dung) Show $('div').append('<p>nội dung thêm vào</p>'); $('div').append($('h3'));
.append(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 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.
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.
.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.
Thành phần div nội dung thêm vào
Ví dụ thêm 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. thành phần h3 thành phần p
thành phần p thành phần h3 Với cách sử dụng function như trên, ta đã thêm bên trong mỗi thành phần div lần lượt là thành phần p với nội dung được lấy từ tên class của thành phần div, các thành phần p này nằm ở vị trí sau cùng trong thành phần div tương ứng. thành phần div 01 thành phần div 0212 gold badges76 silver badges124 bronze badges thành phần div 01 test01 thành phần div 02 test02 Apr 11 at 16:27 For example,
Result: "new content" is appended in page but there will be no alert saying Hello World!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. I have tried innerHTML, insertAdjacentHTML, append, appendChild methods. But the problem is JS and CSS not loading dynamically.Apr 11 at 16:53 In 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> 3 works 👍🏻Nick Vuis there any equivalent for pure javascript?2 gold badges17 silver badges27 bronze badges 0 Mr. Polywhirl
36.6k12 gold badges76 silver badges124 bronze badges asked Apr 11 at 16:27Apr 16 at 22:05 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> 4 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> 4 in some parts of DOM manipulation under the hood.lissettdm
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.1 gold badge12 silver badges35 bronze badges answered Apr 11 at 16:53
Nick VuNick VuApr 11 at 16:32 2 11.9k2 gold badges17 silver badges27 bronze badges <!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> 0If 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('<p>nội dung thêm vào</p>');
});
</script>
</head>
<body>
<div>Thành phần div</div>
</body>
</html> 6 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('<p>nội dung thêm vào</p>');
});
</script>
</head>
<body>
<div>Thành phần div</div>
</body>
</html> 7 and contains a string with valid HTML you can use Range.createContextualFragment() (executes scripts 🚨)Working exampleApr 11 at 16:51 answered Apr 16 at 22:05Mr. Polywhirl thành phần div 01 thành phần div 0212 gold badges76 silver badges124 bronze badges thành phần div 01 test01 thành phần div 02 test02
In 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> 3 works 👍🏻<!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> 1marc_s is there any equivalent for pure javascript?171 gold badges1315 silver badges1433 bronze badges Mr. PolywhirlApr 11 at 16:49 |