요소 삭제 및 교체

저자: 증경림

다음 방법으로 문서에서 지정된 DOM 요소를 삭제하거나 지정된 요소에서 모든 하위 노드를 제거할 수 있습니다.

remove () 방법

empty () 방법

remove () 사례 html



    this 나는 h2

itemp1
itemp2
itemp3
itemp4
itemp5

$(function(){
    $("button").click(function(){
        $("p:eq(0)").remove();
    })  
})

버튼을 클릭하여 수행한 결과



    this 나는 h2


itemp2
itemp3
itemp4
itemp5

첫 번째 p 요소가 삭제됩니다.
empty () 사례 html



    this 나는 h2

itemp1
itemp2
itemp3
itemp4
itemp5

$(function(){
    $("button").click(function(){
        $("p:eq(0)").empty();
    })  
})

버튼을 클릭하여 수행한 결과



    this 나는 h2


itemp2
itemp3
itemp4
itemp5

첫 번째 p 요소 내용이 비워집니다.

다음 방법은 지정된 대상 요소를 새 요소 또는 기존 요소로 대체하는 DOM 요소에 대한 대체 작업을 수행하는 데 사용됩니다.

replaceWith() 메서드

replaceAll() 메서드

replaceWith() 사례 html



    this 나는 h2

itemp1
itemp2
itemp3
itemp4
itemp5

$(function(){
    $("button").click(function(){
       $("p").replaceWith("this is a");
    })  
})

버튼을 클릭하여 수행한 결과



    this 나는 h2

this is a
this is a
this is a
this is a
this is a

모든 p 요소는 a 요소로 바뀝니다.
replaceAll() 사례 html



    this 나는 h2

itemp1
itemp2
itemp3
itemp4
itemp5

$(function(){
    $("button").click(function(){
      $(" ").replaceAll($("p"));
    })  
})

버튼을 클릭하여 수행한 결과



    this 나는 h2

모든 p 요소는 a 요소로 바뀝니다.

clone () 원소 복사 clone (true) 원소 복사 및 원소 귀속 이벤트 복사
clone () 사례 html

$(function(){
    $("button").click(function(){
        var btn=$(this).clone(true);
        //true  
        btn.insertAfter($(this));
    })  
})

임의의 단추를 눌러 실행한 결과

...

모든 p 요소는 a 요소로 바뀝니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다