append()- 선택한 요소의 끝에 내용을 삽입
prepend()- 선택한 요소의 시작 부분에 내용을 삽입
after()- 선택한 요소 뒤에 내용을 삽입
before()- 선택한 요소 앞에 내용을 삽입
1. append()
- 선택한 HTML 요소의 끝에 콘텐츠를 삽입
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Add append() 실습하기</h1>
<hr>
<p>문장1</p>
<p>문장2</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">text 추가</button>
<button id="btn2">list items 추가</button>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").append(" <b>text</b>.");
});
$("#btn2").click(function () {
$("ol").append("<li>추가 item</li>");
});
});
</script>
</body>
</html>
2. prepend()
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Add prepend() 실습하기</h1>
<hr>
<p>문장1</p>
<p>문장2</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">이전 text 추가</button>
<button id="btn2">이전 list items 추가</button>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").prepend("<b>이전 text</b>. ");
});
$("#btn2").click(function () {
$("ol").prepend("<li>이전 item</li>");
});
});
</script>
</body>
</html>
3. text/HTML, jQuery, JavaScript/DOM을 사용
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Add text/HTML, jQuery, JavaScript/DOM을 사용 실습하기</h1>
<hr>
<p>문장</p>
<button onclick="appendText()">Append text</button>
<script>
function appendText() {
var txt1 = "<p>추가 문장 1</p>"; // Create text with HTML
var txt2 = $("<p></p>").text("추가 문장 2"); // Create text with jQuery
var txt3 = document.createElement("p");
txt3.innerHTML = "추가 문장 3"; // Create text with DOM
$("body").append(txt1, txt2, txt3); // Append new elements
}
</script>
</body>
</html>
4. after(), before()
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Add after(), before() 실습하기</h1>
<hr>
<img src="https://i.pinimg.com/originals/24/e8/3a/24e83a6ee87c0c4f3ab805667275bf2c.gif" alt="jQuery" width="100"
height="140"><br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("img").before("<b>Before</b>");
});
$("#btn2").click(function () {
$("img").after("<i>After</i>");
});
});
</script>
</body>
</html>
5. text/HTML, jQuery, JavaScript/DOM로 생성
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Add text/HTML, jQuery, JavaScript/DOM로 생성 실습하기</h1>
<hr>
<img src="https://i.pinimg.com/originals/24/e8/3a/24e83a6ee87c0c4f3ab805667275bf2c.gif" alt="jQuery" width="100"
height="140"><br><br>
<p>Click the button to insert text after the image.</p>
<button onclick="afterText()">Insert after</button>
<script>
function afterText() {
var txt1 = "<b>옴팡이는 </b>"; // Create element with HTML
var txt2 = $("<i></i>").text("너무 "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "귀여워!";
$("img").after(txt1, txt2, txt3); // Insert new elements after img
}
</script>
</body>
</html>
Share article
