DOM 요소를 추가하고 삭제하는 jQuery의 방법에 대한 자세한 설명_jquery

이 글에서는 DOM 요소를 추가하고 제거하는 jQuery 방법을 분석합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

소개

DOM은 Document Object Module의 약자로 일반적으로 DOM 작업은 세 가지 측면으로 나누어집니다.

1. DOM 코어

DOM Core는 javascript에만 국한되지 않습니다. DOM을 지원하는 모든 프로그래밍 언어에서 사용할 수 있으며 XML과 같은 마크업 언어를 사용하여 작성된 모든 문서를 처리하는 데에도 사용할 수 있습니다.
예: document,getElementsByTagName("form"); //DOM Core를 사용하여 양식 개체를 가져옵니다.

2. HTML-DOM

Javascript와 DOM을 사용하여 HTML 파일용 스크립트를 작성할 때 HTML-DOM에 속하는 속성이 많이 있습니다. HTML-DOM은 DOM Core보다 훨씬 이전에 등장하여 다양한 HTML 요소의 속성을 설명하는 좀 더 간결한 표기법을 제공합니다.
예:

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

document.forms //HTML-DOM은 양식 개체를 제공합니다. .

PS: 객체 및 속성 획득은 DOM Core 또는 HTML-DOM을 사용하여 구현할 수 있음을 알 수 있습니다.

3. CSS-DOM

CSS-DOM은 CSS에 대한 연산으로, JavaScript에서 CSS-DOM의 주요 기능은 스타일 객체의 다양한 속성을 획득하고 설정하여 웹페이지가 다양한 효과를 나타낼 수 있도록 하는 것입니다.

예:

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

element.style.color="red" ;//설정 요소의 글꼴 색상을 설정하는 방법입니다.

일반적인 방법

1. 요소 노드 찾기

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

var $li = $("ul li:eq(0)" );/ /ul 태그 아래에서 첫 번째 li을 가져옵니다. $("#ulID li:eq(0)");

으로도 쓸 수 있습니다. 2. 요소 속성 찾기

jquery의 attr() 메소드를 사용하여 요소의 다양한 속성 값을 가져옵니다. attr() 메소드의 매개변수는 1개 또는 2개일 수 있습니다.

매개변수가 1인 경우 쿼리할 속성의 이름입니다.

매개변수가 2개일 경우 속성값을 설정할 수 있습니다.

alert($("#id").attr("title")); //输出元素的title属性.一个参数
$("#id").attr("title","改变title值"); //改变元素的title属性值.二个参数

3. 요소 노드 추가

$(html) 간단히 설명하면 $(html) 메서드는 들어오는 html 태그 문자열을 기반으로 dom 개체를 생성하고 dom 개체를 jquery 개체로 패키징하여 반환합니다. 태그의 HTML 코드를 $() 팩토리로 이동하세요.

예:

var $htmlLi = $(" <li title='香蕉'>香蕉</li>"); //创建DOM对象
var $ul = $("ul");  //获取UL对象
$ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表

아래는 노드를 삽입하는 몇 가지 방법입니다

방법	설명	예
추가()	일치하는 각 요소에 콘텐츠 추가	HTML코드 ff6d136ddc5fdfeffaf53ff6ee95f185929d1f5ca49e04fdcb27f9465b944689 JQuery코드 $(“ul”).append(“25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb”); 결과 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
appendTo()	이 방법은 Append()와 반대입니다. a.Append(b)는 b는 a에 추가되고, appendTo()는 에 추가됩니다. b는 에서 a 를 쫓습니다.	HTML코드 ff6d136ddc5fdfeffaf53ff6ee95f185929d1f5ca49e04fdcb27f9465b944689 JQuery코드 $ (“25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb”).appendTo (“ul”).; 결과 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
앞에 추가()	일치하는 각 요소 안에 콘텐츠를 추가하세요	HTML코드 e388a4556c0f65e1904146cc1a846beeㅋㅋㅋ94b3e26ee717c64999d7867364b1b4a3 JQuery코드 $(“p”).prepend(“a4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747a”); 결과 e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747aㅋㅋㅋ94b3e26ee717c64999d7867364b1b4a3
prependTo()	이 방법은 Prepend()와 반대입니다. a. Prepend(b)는 b는 a 앞에 붙고 prependTo()는 앞에 붙습니다. b는 의 a 앞에 붙습니다.	HTML코드 e388a4556c0f65e1904146cc1a846beeㅋㅋㅋ94b3e26ee717c64999d7867364b1b4a3 JQuery코드 $(“a4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747a”).prependTo.(“p”); 결과 e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747aㅋㅋㅋ94b3e26ee717c64999d7867364b1b4a3
이후()	은 일치하는 각 요소 뒤에 콘텐츠를 삽입하고, 는 뒤에 있습니다.	HTML코드 e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQuery코드 $(“p”).After(“a4b561c25d9afb9ac8dc4d70affff419cc>”); 결과 e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a
insertAfter()	은 After() 의 반대입니다.	HTML코드 e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQuery코드 $ (“a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a”).After(“p”); 결과 e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a
전()	일치하는 각 요소 앞에 콘텐츠를 삽입하세요	HTML코드 e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQuery코드 $(“p”). 이전(“a4b561c25d9afb9ac8dc4d70affff419cc>”); 결과 a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3
insertBefore()	은 Before() 의 반대입니다.	HTML코드 e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQuery코드 $(“a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a”). insertBefore(“p”); 결과 a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3

好了，不要斋看，自己动手试试吧:)

4.删除元素节点

由于我们需要经常动态去改变DOM元素，因此Jquery提供了两种删除节点的方法，即remove()和empty();

4.1 remove()方法

$("p").remove();// 我们可以获取到要删除的元素，然后调用remove()方法
$("ul li:eq(0)").remove().appendTo("ul");// 删除ul下面的第一个li标记，然后再把删除的li标记重新加到ul里面，remove()方法返回删除元素的引用，这时你可以继续使用
$("ul li").remove("li[title!=ABC]");//remove可以接受通过参数来选择性的删除符合条件的元素;

4.2 empty()方法

严格来讲，empty()方法并不是删除元素，而是清空

例：

HTML代码：

<ul>
<li title="AAA">AAA</li>
</ul>

JQuery代码：

复制代码 代码如下:

$("ul li:eq(0)").empty();

结果

<ul>
<li title="AAA"></li>
</ul>

记住，只会清空内容，不会请空属性;

更多关于jQuery操作DOM元素相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》

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