JQuery html 태그 추가 - jQuery html taegeu chuga

Question

우리는 종종 웹 페이지 안에서 동적으로 처리가 되어야 하는 부분을 스크립트로 구성하곤 하는데, 오늘 설명하는 html() 메소드도 웹 페이지를 동적으로 제어할 수 있는 메소드중에 하나 이다.

간단하게 설명하면 html()은 사용자가 버튼을 클릭했을때 특정 위치(div) 안에 테이블을 생성한다던지, 또는 어떠한 특정 위치에 html 태그를 추가하는 기능을 한다.

자바스크립트에서 사용되는 innerHTML() 메소드와 동일한 기능이라고 이해하면 쉽다.

// ID가 test_1인 하위객체의 태그를 가져온다.
var getTag = $("#test_1").html() ;

alertg(getTag) ;



// 추가할 태그
var insTag = "<div id='innerDiv'>테스트</div>"

// dom Id가 test인 항목 하단에 tag 를 삽입한다.
$("#test_2").html(insTag) ;



// 함수를 작성하여 html을 추가할 수도 있다.
$("#test_2").html(function(){
	var gg = "<p>" + $("p").length + "</p>" ;
	return "<div>Good " + gg + "</div>" ;
}) ;

덧) text() 메소드와는 차이가 있으니 구분하자.

반응형

게시글 관리

구독하기과일가게 개발자

저작자표시

'Language > JQuery' 카테고리의 다른 글

[jQuery] Ajax 통신시 Header에 값 추가하여 전송하기 (4)2015.03.24[jQuery] Ajax 기본 사용법 (4)2015.03.19[jQuery] slideUp(), slideDown()를 이용한 객체 펼치기/접기 (0)2015.02.23[Javascript] 숫자 3자리 단위마다 콤마(comma) 찍기 (13)2015.01.27[Javascript] 팝업창으로 POST 전송 (0)2015.01.19

html 요소 삽입하기

jQuery를 이용해 요소를 삽입하는 메소드는 before, after, prepend, append 등이 있다.

각각의 메소드마다 요소가 삽입되는 위치가 조금씩 다르니 자신이 원하는 위치에 따라 알맞게 사용해야 한다.

$(selector).before(content)

// 이때 content에 들어갈 수 있는 값은 HTML elements, jQuery objects, DOM elements이다.

.before()는 selector 이전에 content를 삽입하는 메소드이다.

$("h1").before("

Hello

");

//

이전에

Hello

삽입

$(selector).after(content)

.after()는 selector 이후에 content를 삽입하는 메소드이다.

$("h1").after("

Hello

");

//

이후에

Hello

삽입

$(selector).prepend(content)

.prepend()는 selector의 맨 앞 자식 요소로content를 삽입하는 메소드이다.

$("h1").prepend("

Hello

");

// h1의 열리는 태그 바로 뒤에

Hello

삽입

$(selector).append(content)

.append()는 selector의 맨 뒤 자식 요소로content를 삽입하는 메소드이다.

$("h1").append("

Hello

");

// h1의 닫히는 태그 바로 앞에

Hello

삽입

before(), after(), prepend(), append() 사용 예시

예시1) div 요소 추가하기

html 코드

div 요소 추가 전 실행화면

div 요소 추가하는 js 코드

js코드가 적용된 실행화면

before와 after와는 다르게 prepend와 append는 h1요소 내에 포함된 것을 확인할 수 있다.

공부한 것을 정리한 내용입니다. 수정할 부분이 있다면 알려주시면 감사하겠습니다 :)

jQuery로 동적 태그를 만드는 방법은 여러가지가 있지만, 두 가지만 소개하고자 한다.

1. 태그를 String으로 써서 추가하기

$('#btn1').click(function(){
	var html = "<tr><td>방법1</td><td>방법1</td><td>방법1</td></tr>"
	$('tbody').append(html);
});

2. 객체를 생성하여 추가

$('#btn2').click(function(){
	var $tr = $("<tr>",{});
	var $td1 = $("<td>",{text:"방법2"});
	var $td2 = $("<td>",{text:"방법2"});
	var $td3 = $("<td>",{text:"방법2"});
	
	$tr.append($td1);
	$tr.append($td2);
	$tr.append($td3);
	
	$('tbody').append($tr);
});

tr태그를 우선 만들어 준뒤 tr태그에 td를 추가하는 방식이다.

text만 지정해 주었지만 id나 class등 원하는 속성과 값을 추가할 수 있다.

예제 소스

<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<table border="1">
		<colgroup>
			<col width="200"><col width="200"><col width="200"><col width="200">
		</colgroup>
		<thead>
			<tr>
				<th>t1</th>
				<th>t2</th>
				<th>t3</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
		</tbody>
	</table>
	<button type="bytton" id="btn1">방법1</button>
	<button type="bytton" id="btn2">방법2</button>
	
	
	<script>
		$(document).ready(function(){
			
			$('#btn1').click(function(){
				var html = "<tr><td>방법1</td><td>방법1</td><td>방법1</td></tr>"
				$('tbody').append(html);
			});
			
			$('#btn2').click(function(){
				var $tr = $("<tr>",{});
				var $td1 = $("<td>",{text:"방법2"});
				var $td2 = $("<td>",{text:"방법2"});
				var $td3 = $("<td>",{text:"방법2"});
				
				$tr.append($td1);
				$tr.append($td2);
				$tr.append($td3);
				
				$('tbody').append($tr);
			});
			
		});
	</script>
</body>

게시글 관리

구독하기밍구

저작자표시 비영리

'프로그래밍 > jQuery & javaScript' 카테고리의 다른 글

[jQuery] CSS 추가, 삭제, 변경 (0)2019.10.28[jQuery] 요소 삭제 remove와 empty (0)2019.09.10자바스크립트 날짜 계산(년, 월, 일, 시, 분, 초) (0)2019.08.22jqGrid 사용 예제 (v5.3.2, v4.4.3) (2)2019.07.17jQuery 이미지 클릭 시 크게 보기 (9)2019.06.26

jQuery 태그 추가 jQuery html append jQuery html 추가 jQuery html 추가/삭제 jQuery appendTo 자바스크립트 html 추가