[jQuery] DOM Manipulation

DOM Manipulation

DOM Manipulation은 DOM 구조를 변경할 수 있는 jQuery 메서드들이다. 동적으로 문서 구조를 변경할 수 있고, 특정 노드의 내.외부 삽입과 삭제도 가능하다.

1. DOM Insertion, Inside

메서드	기 능
append()	선택된 내부의 맨 뒤에 자식 노드를 새로 추가한다.
appendTo(target)	새로운 노드를 target에 해당하는 노드 내부의 마지막에 추가한다.
prepend()	선택된 노드 내부의 맨 앞에 자식 노드를 새로 추가한다.
prependTo(target)	새로운 노드를 target에 해당하는 노드 내부의 첫 번째로 추가한다.
html()	노드 내부의 HTML을 읽고 쓸 수 있다.
text()	노드의 텍스트를 읽고 쓸 수 있다.

.append(content, [content]) Returns: jQuery

append() 함수는 선택된 요소의 내부에 가장 뒤에 있는 매개변수로 전달되는 HTML 문자열, <DOM> 요소 등을 추가해주는 함수이다.

cf.) 매개변수: content

선택된 요소 내부의 앞에 추가될 HTML 문자열, DOM 요소, jQuery 객체 뒤의 content는 매개변수로 여러 개를 가질 수 있다는 뜻이다.

$("div").append("<p>반갑습니다.</p>");

<p>안녕하세요</p>

//<p> append() 실행시 추가될 공간 </p>

</div>

cf.) append(method)

<!doctype html>

<html>

<head>

<title>append()활용</title>

<style>

div {

border: #00F solid 1px;

}

</style>

</head>

<body>

<button id="append" title="append">append</button>

$("#append").click(function(e) {

$("div#container").append(fetchImg());

});

function fetchImg() {

var n = Math.ceil(Math.random() * 3);

var imgPath = "<img src='pic"+n+".jpg' alt='' width='100' height='100' />";

return imgPath;

}

</script>

</body>

</html>

append() 실행후

.prepend(content, [content]) Returns: jQuery

prepend() 함수는 선택된 요소 내부의 가장 앞에 매개 변수로 전달되는 HTML 문자열, <DOM> 요소 등을 추가해주는 함수이다.

append()와는 요소가 추가되는 위치가 다르다.

$("div").prepend("<p>반갑습니다.</p>");

//<p> prepend() 실행시 추가될 공간 </p>

<p>안녕하세요</p>

</div>

prepend() 활용예제)

<!doctype html>

<html>

<head>

<title> prepend활용 </title>

<style>

img {padding:0px; margin:5px;}

</style>

</head>

<body>

</div>

<p> prepend를 사용하여 사진을 순환합니다. </p>

<button id ="prepend" title="prepend">prepend</button>

$("button#prepend").click(function(e) {

$("div#container").prepend( $("div#container img:last") ); // 매개변수로 jQuery 객체나 나오는 모습

});

</script>

</body>

</html>

html()/html(htmlString) html() 함수는 javaScipt에서 innerHTML과 같은 기능을 하는 것으로, 선택 집합의 내부 요소들을 HTML 문자열로 반환한다. html() 함수에 인자로 HTML 문자열이 전달되면 그 요소에 HTML을 추가하는 것이다. .html() returns: String HTML 문서에서 어떤 요소의 내부 html을 알아내고자 할 때 html() 함수를 사용할 수 있다.

var htmlString = $("div#intro").html(); // div#intro 요소내부의 html 내용을 htmlString 변수에 저장 // htmlString= <p>intro 입니다.</p>

<div id="intro"> <p>intro 입니다.</p> </div>

return 되는 값이 문자열이라는 것에 주의하자.

실제 htmlString에 대입되는 값은 <p>intro 입니다.</p> 이다.

.html(htmlString) returns:jQuery 선택 집합의 요소에 들어가는 html을 변경하는 것이다.

var htmlString = $("div#intro").html();

$("div#main").html(htmlString); // htmlString변수값을 #main 요소내부에 새로운 html 문자열을 추가한다. 기존에 있는 html은 제거됩니다. <div id="intro"> <p>intro 입니다.</p> </div> <div id="main"> <p>여기는 main 입니다.</p> //<p>intro 입니다.</p> <p> <img src='pic1.jpg' /> </p> </div>

실행결과)

내용은 삭제 되고 <p>intro 입니다.</p> 가 추가된다.

.text(textString) returns: jQuery

선택 집합의 노드에 들어가는 내용을 변경하는 것이다. (텍스트 노드 영역만 변경)

예를 들어 HTML이 <div> <p>HI</p> </div> 와 같은 구조일 때 $("div").text("TITLE")라는 명령어일 경우 <div> <p>TITLE</p> <div> 로 변경된다.

var textString = $("div#intro").text();

// div#intro 요소의 텍스트 내용을 textString 변수에 저장한다.

// textString = intro 입니다.

$("div#main").text(textString);

// textString변수값을 #main 요소에 텍스트로 추가, 기존에 있는 텍스트는 제거된다.

<p>intro 입니다.</p>

</div>

<p>

</p>

</div>

2. DOM Insertion, Outside

메서드	기 능
after()	선택된 노드 뒤에 새로운 노드를 추가한다.(형제 관계)
before()	선택된 노드 앞에 새로운 노드를 추가한다.(형제 관계)
insertAfter()	작성된 jQuery 객체를 target 뒤에 삽입한다.(형제 관계)
insertBefore()	작성된 jQuery 객체를 target 앞에 삽입한다.(형제 관계)

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

// after: p태그 내용안에 들어가는 자식태그가 아니라 대등한 태그로...

<p>

I would like to say:

</p>

3. DOM Insertion, Around

메서드	기 능
wrap()	선택된 집합을 각각의 매개 변수로 넘긴 HTML 구조로 감싼다.
wrapAll()	선택된 집합의 전체 외곽을 매개 변수로 넘긴 HTML 구조로 감싼다.
wrapInner()	선택된 집합의 내부에 매개 변수로 넘긴 HTML 구조를 감싼다.

$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");

<strong>What about me?</strong>

<span>Another One</span>

4. DOM Removal

메서드	기 능
detach()	DOM에서 조건에 일치되는 노드들을 제거한다.(단, 메모리에 남아 있기 때문에 다시 사용할 수 있다.)
empty()	DOM에서 조건과 일치하는 노드들의 자식 노드들을 제거한다.
remove()	DOM에서 조건과 일치하는 노드들을 제거한다.
unwrap()	wrap()의 반대로, 선택된 집합을 감싸고 있는 HTML을 제거한다.

.remove([selector]) returns: jQuery

remove() 함수는 선택된 노드를 DOM에서 제거한다.

$("img:first").remove();

// 이미지 중 첫번째 노드를 제거한다.

<img src='th_pic1.jpg'/> //제거된다.

</div>

.empty() returns: jQuery

선택 객체의 자식 노드(자손까지 포함) 노드를 삭제한다. 하지만 선택 객체 자체는 삭제되지 않는다. 이것이 remove()와 다른 점이다.

$("p:first").empty();

// <p> 태그 중의 첫 번째 <p> 태그의 내용을 삭제합니다.<p> 노드 자체가 제거되지 않습니다.

<p>jQuery</p>

<p>write less</p>

</div>

cf.) empty() 와 remove() 함수는 DOM에서 노드를 걷어내는 점이 비슷하다. remove()를 사용하면 해당 노드를 포함한 모든 노드들이 제거된다. 이 때에는 노드와 관련된 모든 이벤트와 jQuery 데이터들도 제거된다.

데이터와 이벤트를 노드에서 제거하지 않으려면, detach()를 사용해야 한다.

detach()

remove() 함수와 똑같은 일을 한다. remove() 함수와 다른 점은 detach() 함수에 의해 제거된 노드들을 임시로 보관할 수 있다는 것이다.

이 함수는 DOM에서 제거했다가 다름에 다시 삽입할 수 있기 때문에 제거와 삽입을 반복할 때 유용하다.

var temp = $("div#content").detach();

// id가 content인 div의 모든 내용을 DOM 구조에서 제거하고, 제거된 내용은 temp에 저장한다.

5. DOM Replacement

메서드	기 능
replaceAll()	조건에 맞는 노드들을 타깃 노드들로 대체한다.
replaceWith()	조건에 맞는 노들들을 매개 변수로 넘긴 새로운 HTML로 대체한다.

6. clone(): 선택한 노드와 똑같은 노드를 복사한다.

간략 정리)

자식으로 삽입 (.append(), .appendTo(), .html(), .prepend(), .prependTo(), .text())

형제로 삽입 (.after(), .before(), .insertAfter(), .insertBefore())

부모로 감싸기 (.unwrap(), .wrap(), .wrapAll(), .wrapInner())

삭제 (.detach(), .empty(), .remove(), .unwrap())

치환 (.replaceAll(), .replaceWith())

저작자표시

'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Event (0)	2014.12.07
[jQuery] Attribute/CSS (0)	2014.12.07
[jQuery] Traversing (0)	2014.12.07
[jQuery] Wrapper (0)	2014.12.07
[jQuery] Selector (0)	2014.11.29

'WebFont-end > jQuery' 카테고리의 다른 글

티스토리툴바