자바스크립트 - append, prepend, after, before

Notice

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

그러냐

자바스크립트 - append, prepend, after, before - 추가 본문

jquery

자바스크립트 - append, prepend, after, before - 추가

관절분리 2019. 11. 6. 16:44

비슷하지만 다른 메소드 입니다.

태그의 내부와 외부에 값이 들어가는 차이가 있고 앞부분과 뒷부분에 들어가는 차이가 있습니다.

◎ append() - 컨텐츠를 선택된 요소 내부의 끝 부분에서 삽입
◎ prepend() - 콘텐츠를 선택한 요소 내부의 시작 부분에서 삽입
◎ after() - 선택한 요소 뒤에 컨텐츠 삽입
◎ before() - 선택된 요소 앞에 컨텐츠 삽입

간단하게 예를 들어보면

<p> 중앙 </p> 이렇게 태그가 있을경우

append() 는 <p> 중앙 여기에 값이들어감</p>

prepend() 는 <p>여기에 값이들어감 중앙 </p>

after() 는 <p> 중앙 </p>여기에 값이들어감

before() 는 여기에 값이들어감<p> 중앙 </p>

중앙 이라는 글자 대신 다른 태그가 들어가 있다면 결과물의 배치가 달라지겠죠...^^

--------------------------------------

부모자식관계
$(A).append(B) : 위에서 언급한 메소드이다. 부모 A태그 가장 뒤에 B태그를 위치시킴
$(A).prepend(B) : 부모 A태그 가장 앞에 B태그를 위치시킴
$(A).appendTo(B) : to로 인해 헷갈릴 수 있는 메서드다 주의하자. A태그를 부모 B태그 가장 뒤에 위치시킴
$(A).prependTo(B) : A태그를 부모 B태그 가장 앞에 위치시킴

형제관계
$(A).before(B) : A객체 앞에 B를 위치시킴
$(A).after(B) : A객체 뒤에 B를 위치시킴
$(A).insertBefore(B) : A객체를 B앞에 위치시킴
$(A).insertAfter(B) : A객체를 B뒤에 위치시킴

------------------------------------

1. 태그 다루기

태그명을 사용 $("태그명") or $('태그명')

클래스명을 사용 $(".클래스명") or $('.클래스명')

아이디명을 사용 $("#아이디명") or $('#아이디명')

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.태그 다루기</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
// 모든 div 태그의 텍스트를 "goal"로
$(document).ready(function(){
var divs = $("div");
divs.text("goal");
});
</script>
</head>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>

※ 코드 실행후 콘솔창에 다음과 같은 메세지가 출력되면...

jquery warning(event.returnValue is deprecated. Please use the standard event.preventDefault() instead.)이 발생하며 다음의 게시글 참조 http://cafe.naver.com/jjdev/1508

2. 자식 태그 다루기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.특정 태그의 자식 태그 다루기</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
// div태그아래 두번째(인덱스값 1) span 태그의 텍스트를 "goal"로
$(document).ready(function(){
var goal = $("div span:eq(1)");
goal.text("goal");
});
</script>
</head>
<body>
<p>
<span>p태그 내부의 span</span>
</p>
<div>
<span>0</span>
<span>1</span>
<span>2</span>
</div>
</body>
</html>

3. 태그(노드)관련 자주사용되는 jQuery 메서드

① contents() : 자식태그(노드)의 집합체를 리턴

var goal = $("body").contents();

console.log(goal.size());

var goal = $("body").contents(":first"); // body의 첫번째 자식 태그(노드)를 리턴

var goal = $("body").contents(":eq(0)"); // body의 첫번째 자식 태그(노드)를 리턴

var goal = $("body").contents().first(); // body의 첫번째 자식 태그(노드)를 리턴

var goal = $("body").contents().eq(0); // body의 첫번째 자식 태그(노드)를 리턴

② parent() : 부모태그(노드)를 리턴

var goal = $("#test").parent(); // 아이디가 test인 태그(노드)의 부모 태그(노드)를 리턴

③ prev(), next() : 동일 부모아래 이전, 다음 태그(노드)를 리턴

var goal = $("body").contents().first().next(); // body아래 첫번째 태그(노드)의 다음 태그(노드)를 리턴

④ html() : 태그(노드) 추가

var goal = $("#goal");

goal.html("<span>hello</span>");

⑤ remove() : 태그(노드) 삭제

$("#goal").remove();

⑥ append() : 텍스트(텍스트노드) 추가

$("#goal").append("hello");

⑦ text() : 텍스트(텍스트노드) 수정

$("#goal").text("hello");

[출처] 자바스크립트 - append, prepend, after, before - 추가|작성자 산들바람

'jquery' 카테고리의 다른 글

jQuery 체크박스 전체선택/해제하기(attr/prop 차이) (0)	2020.11.23
jquery class 변경 추가 삭제 (0)	2020.08.13
jquery ajax 화면 동적 전환, 깜빡임 없이 페이지 이동 (0)	2019.11.06
제이쿼리 ajax 더보기 버튼 구현 (0)	2019.10.22
[jquery] inArray 숫자 비교시 작동되지 않을 시 (0)	2019.08.14

'jquery' Related Articles

그러냐

자바스크립트 - append, prepend, after, before - 추가 본문

자바스크립트 - append, prepend, after, before - 추가

'jquery' 카테고리의 다른 글

티스토리툴바