DOM node_jquery를 생성하는 JQuery의 방법

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

JQuery 선택기를 사용하여 문서에서 특정 요소 노드를 빠르고 쉽게 찾은 다음 attr() 메서드를 사용하여 요소의 다양한 속성 값을 가져옵니다. 그러나 실제 DOM 조작은 그렇게 간단하지 않습니다. DOM 작업에서는 브라우저의 문서 표시를 변경하고 다양한 인간-컴퓨터 상호 작용 목적을 달성하기 위해 HTML 콘텐츠를 동적으로 생성해야 하는 경우가 많습니다.

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>

요소 노드 생성

예를 들어 두 개의 25edfb22a4f469ecb59f1190150159c6 요소 노드를 생성하여 DOM 노드 트리에 ff6d136ddc5fdfeffaf53ff6ee95f185 요소 노드의 하위 노드로 추가하려고 합니다. 이 작업을 완료하려면 두 단계가 필요합니다.

1. 두 개의 새로운 요소를 만듭니다.
2. 두 개의 새로운 요소를 문서에 삽입합니다.

첫 번째 단계는 다음 형식으로 jQuery의 팩토리 함수 $()를 사용하여 완료할 수 있습니다.

$(html);

$(html) 메소드는 수신 HTML 마크업 문자열을 기반으로 DOM 객체를 생성하고 DOM 객체를 jQuery 객체로 래핑하여 반환합니다.

먼저 두 개의 25edfb22a4f469ecb59f1190150159c6 요소를 생성합니다. jQuery 코드는 다음과 같습니다.

var $li_1 = $("<li></li>"); // 创建第一个<li>元素
var $li_2 = $("<li></li>"); // 创建第二个<li>元素

그런 다음 이 두 가지 새로운 요소를 문서에 삽입하면 jQuery에서 Append()와 같은 메서드를 사용할 수 있습니다. JQuery 코드는 다음과 같습니다.

var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

동적으로 생성된 새 요소 노드는 문서에 자동으로 추가되지 않지만 다른 방법을 사용하여 문서에 삽입해야 합니다. 개별 요소를 생성할 때 태그를 닫고 표준 XHTML 형식을 사용하는 데 주의하세요. 예를 들어, e388a4556c0f65e1904146cc1a846bee 요소를 생성하려면 $("a6f776b766579c28d02706af09482172") 또는 $("e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3")를 사용할 수 있지만 $("< ;p>") 또는 대문자 $("

").

텍스트 노드 생성

두 개의 25edfb22a4f469ecb59f1190150159c6 요소 노드가 생성되어 문서에 삽입되었습니다. 이때 생성된 요소 노드에 텍스트 내용을 추가해야 합니다.

JQuery 코드는 다음과 같습니다.

var $li_1 = $("
新增节点：数据结构
"); // 创建第一个
元素
var $li_2 = $("
新增节点：设计模式
"); // 创建第二个
元素
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

위 코드에서 보듯이 텍스트 노드를 생성한다는 것은 요소 노드 생성 시 텍스트 내용을 직접 작성한 뒤, Append() 등의 메소드를 사용하여 문서에 추가하는 것입니다.

$(html)의 HTML 코드가 아무리 복잡하더라도 동일한 방식으로 생성되어야 합니다. 예를 들어 $("25edfb22a4f469ecb59f1190150159c6907fae80ddef53131f3292ee4f81644b이것은d1c6776b927dc33c5d9114750b586338a4b561c25d9afb9ac8dc4d70affff419a0d36329ec37a2cc24d42c7229b69747aee7959cc8dd4be16ef633321c03dac32복잡한 조합5db79b134e9f6b82c0b36e0489ee08ed2867e861ba23559b572f230426ab14ea" );

속성 노드 생성

속성 노드를 생성하는 것은 텍스트 노드를 생성하는 것과 유사하며, 요소 노드를 생성할 때 직접 생성되기도 합니다. JQuery 코드는 다음과 같습니다.

var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建第一个<li>元素
var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

브라우저 소스 코드 도구를 통해 코드를 보면 마지막 두 개의 25edfb22a4f469ecb59f1190150159c6 요소에 "title"이라는 속성 노드가 있음을 알 수 있습니다. 이를 통해 생성된 요소의 텍스트 노드와 속성 노드가 웹 페이지에 추가되었음을 판단할 수 있습니다. HTML 요소를 동적으로 생성하기 위해 jQuery를 사용하는 것은 매우 간단하고 편리하며 유연하다는 것을 알 수 있습니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.