속성, 요소, 객체 조작 메서드_jQuery

- 제이쿼리 메서드를 활용하여 요소 조작이 가능하다.

  (text 요소, html 요소)

  (innerText, innerHTML)

- 제이쿼리 메서드를 활용하여 속성 조작이 가능하다.

  (속성, 상태속성)

  (getAttribute, setAttribute, classList, style)

- 제이쿼리 메서드를 활용하여 document 객체 조작이 가능하다.

  (element 객체)

  (appendChild, createElement)

 

요소 조작 메서드

- 텍스트 요소 및 html 요소 조작

- text() -> 선택된 객체의 텍스트 요소를 가지고 오거나 변경

- html() -> 선택된 객체의 html 요소를 가지고 오거나 변경

 

객체 조작 메서드

- append() -> 선택된 객체에 인수에 삽입된 제일 마지막 요소로 추가

- prepend() -> 선택된 객체에 인수에 삽입된 제일 첫번째 요소로 추가 

<ul id="ul01">
	<li>한국스마트정보교육원1</li>
	<li>한국스마트정보교육원2</li>
</ul>
<button type="button" id="textM">텍스트 요소 삽입</button>
<button type="button" id="htmlM">HTML 요소 삽입</button>
<script type="text/javascript">
	//text()
	//text 메서드는 하위 텍스트 요소 전체를 가지고 온다.
	console.log($('#ul01').text());
	//html 메서드는 하위 html 요소 및 텍스트 요소 전체를 가지고 온다.
	console.log($('#ul01').html());
	
	$('#textM').click(function(){
		//텍스트 요소로 교체
		$('#ul01').text('<li>ksmart</li>');
	});
	$('#htmlM').click(function(){
		//HTML 요소로 교체
		$('#ul01').text('<li>ksmart</li>');
	});
</script>