jQuery를 사용하여 노드를 생성하고 노드를 추가하는 방법에 대한 자세한 그래픽 설명-JS 튜토리얼-php.cn

집

jQuery를 사용하여 노드를 생성하고 노드를 추가하는 방법에 대한 자세한 그래픽 설명

Oct 12, 2018 pm 02:41 PM

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>

로그인 후 복사

효과는 그림과 같습니다.

jQuery를 사용하여 노드를 생성하고 노드를 추가하는 방법에 대한 자세한 그래픽 설명

메서드 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>

로그인 후 복사

효과는 그림과 같습니다.

jQuery를 사용하여 노드를 생성하고 노드를 추가하는 방법에 대한 자세한 그래픽 설명
또한, 이후( ) 메소드와 before() 메소드가 있습니다. jQuery의 after() 메소드는 선택한 요소 뒤에 내용을 삽입하고 before() 메소드는 선택한 요소 앞에 내용을 삽입합니다. 본질은 append() 및 prepend()와 유사하므로 여기서는 설명하지 않겠습니다.