새 HTML 콘텐츠 추가
새 콘텐츠를 추가하는 네 가지 jQuery 메서드를 알아봅니다.
append() - 선택한 요소의 끝에 콘텐츠 삽입
prepend() - 선택한 요소의 시작 부분에 콘텐츠 삽입
after( ) - 선택한 요소 뒤에 내용 삽입
before() - 선택한 요소 앞에 내용 삽입
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>追加文本</b>。");
});
$("#btn2").click(function(){
$("ol").append("<li>追加列表项</li>");
});
});
</script>
</head>
<body>
<p>段落。</p>
<p>另一个段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>prepend() 메소드
jQuery prepend() 메소드는 선택한 요소의 시작 부분에 내용을 삽입합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在开头追加文本</b>。 ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>在开头添加列表项</li>");
});
});
</script>
</head>
<body>
<p>段落。</p>
<p>另一个段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>append() 및 prepend() 메소드는 매개변수를 통해 무제한의 새 요소를 수신할 수 있습니다. 텍스트/HTML은 위의 예와 같이 jQuery를 통해 생성되거나 JavaScript 코드 및 DOM 요소를 통해 생성될 수 있습니다.
after() 및 before()
jQuery after() 메소드는 선택한 요소 뒤에 내용을 삽입합니다.
jQuery before() 메서드는 선택한 요소 앞에 콘텐츠를 삽입합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("span").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("span").after("<i>之后</i>");
});
});
</script>
</head>
<body>
<span style="font-size: 30px;">内容</span>
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>after() 및 before() 메소드는 매개변수를 통해 무제한의 새 요소를 수신할 수 있습니다. 새로운 요소는 텍스트/HTML, jQuery 또는 JavaScript/DOM을 통해 생성될 수 있습니다.
다음 섹션