jQuery를 사용하여 노드를 생성하고 노드를 추가하는 방법에 대한 자세한 그래픽 설명
- yulia원래의
- 2018-10-12 14:41:374507검색
jQuery는 JavaScript 기반의 프레임워크로, 단순성과 편리성 때문에 널리 사용됩니다. jQuery로 노드를 생성하고 추가하는 방법을 알고 계시나요? 이 기사에서는 jQuery를 사용하여 노드를 생성하고 노드를 추가하는 방법에 대해 설명합니다. 이는 특정 참조 값이 있으며 관심 있는 친구들이 이를 참조할 수 있습니다.
참고: jQuery를 사용하는 경우 먼저 jQuery 파일
메서드 1, append() 메소드
append( ) 노드를 추가하고 선택한 요소의 끝에 추가할 수 있습니다
예: 정렬되지 않은 목록의 끝에 용과 항목을 추가합니다
설명: 먼저
- 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>榴莲</li>
<li>西瓜</li>
<li>橘子</li>
<li>雪梨</li>
</ul>
<button id="btn">点击添加</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("ul").append(" <li>火龙果</li>");
});
});
</script>
</html>효과는 그림과 같습니다.
메서드 2, prepend() 메소드
prepend() 메소드는 노드를 추가할 수 있으며, 이는 노드의 시작 부분에 추가됩니다. 선택된 요소
예: 순서가 지정되지 않은 목록에 첫 번째 요소로 용과가 추가됩니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>榴莲</li>
<li>西瓜</li>
<li>橘子</li>
<li>雪梨</li>
</ul>
<button id="btn">点击添加</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("ul").prepend(" <li>火龙果</li>");
});
});
</script>
</html>효과는 그림과 같습니다.
또한, 이후( ) 메소드와 before() 메소드가 있습니다. jQuery의 after() 메소드는 선택한 요소 뒤에 내용을 삽입하고 before() 메소드는 선택한 요소 앞에 내용을 삽입합니다. 본질은 append() 및 prepend()와 유사하므로 여기서는 설명하지 않겠습니다.
위에서는 jQuery에서 노드를 생성하고 추가하는 방법을 소개합니다. 관심 있는 친구는 after() 메서드와 before() 메서드를 직접 사용해 볼 수 있습니다. 더 많은 관련 튜토리얼을 보려면 jQuery Video Tutorial
을 방문하세요.위 내용은 jQuery를 사용하여 노드를 생성하고 노드를 추가하는 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!