jquery가 페이지에 요소를 추가할 수 있나요?-프런트엔드 Q&A-php.cn

jquery가 페이지에 요소를 추가할 수 있나요?

WBOY

풀어 주다： 2022-06-09 16:47:13

원래의

1803명이 탐색했습니다.

jquery는 페이지에 요소를 추가할 수 있습니다. 추가 방법: 1. "Element Object.append("Insert Content")"를 사용하여 요소 끝에 요소를 추가합니다. 2. "Element Object.prepend("Insert Content")"를 사용하여 요소의 시작 부분에 요소를 추가합니다. 3. "Element object.after("Insert content")"를 사용하여 선택한 요소 뒤에 요소를 추가합니다. 4. "Element object.before("Insert content")"를 사용하여 선택한 요소 뒤에 요소를 추가합니다.

jquery가 페이지에 요소를 추가할 수 있나요?

이 튜토리얼의 운영 환경: windows10 시스템, jquery3.4.1 버전, Dell G3 컴퓨터.

jquery는 페이지에 요소를 추가할 수 있습니다

jquery는 페이지에 요소를 추가할 수 있습니다

append() - 선택한 요소의 끝에 콘텐츠를 삽입합니다

$(selector).append(content,function(index,html))

로그인 후 복사

예제는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>12</title>
<script src="js/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>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
<button id="btn1">插入文本</button>
<button id="btn2">插入列表项</button>
</body>
</html>

로그인 후 복사

출력 결과:

jquery가 페이지에 요소를 추가할 수 있나요?

prepend() - 선택한 요소의 시작 부분에 콘텐츠

삽입:

$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend(" <b>插入文本</b>.");
});
$("#btn2").click(function(){
$("ol").prepend("<li>插入项</li>");
});
});

로그인 후 복사

출력 결과:

jquery가 페이지에 요소를 추가할 수 있나요?

after() - 선택한 요소 뒤에 콘텐츠 삽입

$(document).ready(function(){
$("#btn1").click(function(){
$("p").after(" <b>插入文本</b>.");
});
$("#btn2").click(function(){
$("ol").after("<li>插入项</li>");
});
});

로그인 후 복사

출력 결과:

jquery가 페이지에 요소를 추가할 수 있나요?

before() - 선택한 요소 앞에 콘텐츠 삽입

$(document).ready(function(){
$("#btn1").click(function(){
$("p").before(" <b>插入文本</b>.");
});
$("#btn2").click(function(){
$("ol").before("<li>插入项</li>");
});
});

로그인 후 복사

출력 결과:

jquery가 페이지에 요소를 추가할 수 있나요?