DOM 노드를 삽입하는 JQuery 방법_jquery

이 기사의 예에서는 JQuery를 사용하여 DOM 노드를 삽입하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

새로 생성된 요소를 문서에 삽입해야 하므로 HTML 요소를 동적으로 생성하는 것은 실용적이지 않습니다. 새로 생성된 노드를 문서에 삽입하는 가장 간단한 방법은 해당 노드를 문서에 있는 노드의 하위 노드로 만드는 것입니다. 이전에는 노드를 삽입하기 위해 add() 메소드를 사용했는데, 이는 요소 내부에 새로 생성된 콘텐츠를 추가합니다.

새로 생성된 노드를 문서에 삽입하는 방법은 하나만 있는 것이 아닙니다. JQuery는 아래 표와 같이 노드를 삽입하는 다른 방법도 제공합니다. 독자는 실제 필요에 따라 유연하게 다양한 선택을 할 수 있습니다.

HTML DOM 구조는 다음과 같습니다.

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery编程'>简单易懂的JQuery编程</li>
</ul>

추가()

일치하는 각 요소 안에 콘텐츠 추가:

HTML 코드:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말:

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$("p").append("Hello< ; /b>");

결과:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말: 안녕하세요< /b> ;

appendTo()

일치하는 모든 요소를 ​​지정된 요소에 추가합니다. 실제로 이 방법을 사용하면 일반 $(A).append(B) 작업이 반전됩니다. 즉, B를 A에 추가하는 대신 A를 B에 추가합니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말:

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$("Hello"). 추가("p");

결과:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말: 안녕하세요< /b> ;

앞에 추가()

일치하는 각 요소 안에 콘텐츠를 추가합니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말:

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$("p").prepend<"Hello< ; /b>");

결과:

코드 복사 코드는 다음과 같습니다.

안녕하세요 말하다 ：

prependTo()

일치하는 모든 요소를 ​​지정된 요소 앞에 추가합니다. 실제로 이 방법을 사용하면 일반 $(A).prepend(B) 작업이 반전됩니다. 즉, B를 A 앞에 추가하는 대신 A를 B 앞에 추가합니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말:

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$("Hello"). prependTo ("p");

결과:

코드 복사 코드는 다음과 같습니다.

안녕하세요 말하다 ：

이후()

일치하는 각 요소 뒤에 콘텐츠를 삽입하세요.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말:

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$("p").after("Hello< ; /b>");

결과:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말은:

< ;b>좋습니다

삽입Afler()

지정된 요소 뒤에 일치하는 모든 요소를 ​​삽입합니다. 실제로 이 방법을 사용하면 일반 $(A).after(B) 작업이 반전됩니다. 즉, A 뒤에 B를 삽입하는 대신 A가 B 뒤에 삽입됩니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말:

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$("Hello"). insertAfter("p");

결과:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말은:

< ;b>좋습니다

() 전

일치하는 각 요소 앞에 콘텐츠 삽입:

HTML 코드:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말:

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$("p").before("Hello< ; /b>");

결과:

코드 복사 코드는 다음과 같습니다.

안녕하세요

원합니다 말하다 ：

insertBefore()

일치하는 모든 요소를 ​​지정된 요소 앞으로 밀어넣습니다. 실제로 이 방법을 사용하면 일반 $(A).before(B) 작업이 반전됩니다. 즉, A 앞에 B를 삽입하는 대신 B 앞에 A를 삽입합니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

하고 싶은 말:

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$("Hello"). insertBefore ("p");

결과:

코드 복사 코드는 다음과 같습니다.

안녕하세요

원합니다 ：

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。例如利用它们创建新元素并对其进行插入操作：

$(function(){
  var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建第一个<li>元素
  var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素
  var $li_3 = $("<li title='新增节点：计算机算法'>新增节点：计算机算法</li>"); // 创建第三个<li>元素
  var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
  var $two_li = $(".nm_ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  $("#btn_1").click(function(){
    $parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
  });
  $("#btn_2").click(function(){
    // 可以采取链式写法：$parent.append($li_1).append($li_2);
    $parent.append($li_2);   
  });
  $("#btn_3").click(function(){
    // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
    $li_3.insertAfter($two_li); 
  });
});

也利用它们对原有的DOM元素进行移动：

$(function(){
  var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点
  $two_li.insertBefore($one_li); //移动节点
});

希望本文所述对大家的jQuery程序设计有所帮助。