JavaScript - div, 태그 안의 내용 가져오기

Javascripthtml

<div/> 또는 <li/> 등 요소 안에 있는 내용들을 가져오는 방법에 대해서 알아봅니다.

innerHTML, innerText, textContent로 텍스트 가져오기

아래와 같은 속성을 사용하여 Element에서 태그 안의 텍스트를 가져올 수 있습니다.

  • innerHTML : element 안의 HTML 또는 XML을 가져옴
  • innerText : 사용자에게 보여지는 텍스트를 가져옴
  • textContent : node 안의 텍스트를 가져옴

아래 코드는 <ul/> 요소가 갖고 있는 내용을 가져오는 예제입니다.

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>

	<ul id="names">
		<li>Jone</li>
		<li>Patrick</li>
		<li>Alex</li>
	</ul>

  <button onclick="getContent()">내용 가져오기</button>

  <script>
    function getContent() {
      var element = document.getElementById("names");

			console.log("#InnerHTML");
			console.log(element.innerHTML);

			console.log("#InnerText");
			console.log(element.innerText);

			console.log("#TextContent");
			console.log(element.textContent);
    }
  </script>

</body>
</html>

Output:

#InnerHTML

		<li>Jone</li>
		<li>Patrick</li>
		<li>Alex</li>

#InnerText
Jone
Patrick
Alex
#TextContent

		Jone
		Patrick
		Alex

3개 속성에 대한 자세한 설명은 아래 mozilla의 페이지를 참고해주세요.

내부 텍스트 변경/삭제

innerText를 이용하여 element가 갖고 있는 텍스트만 변경할 수 있습니다.

  • element.innerText = "반가워요."는 text를 변경합니다.
  • element.innerText = "" 처럼 text를 삭제할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>

	<div id="hello">안녕하세요?</div>

  <button onclick="changeContent()">내용 변경</button>

  <script>
    function changeContent() {
      var element = document.getElementById("hello");
			element.innerText = "반가워요."
    }
  </script>

</body>
</html>

element 안에 element 추가

appendChild()를 이용하여 element 안에 다른 element를 추가할 수 있습니다.

아래 예제는 div에 새로운 div와 텍스트를 추가하는 예제입니다.

  • createElement()로 div를 생성하고, createTextNode()로 text node 생성
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>

	<div id="hello">안녕하세요?</div>

  <button onclick="changeContent()">내용 변경</button>

  <script>
    function changeContent() {
      var element = document.getElementById("hello");

			const newDiv = document.createElement('div');
			const newText = document.createTextNode("반가워요!");
			newDiv.appendChild(newText)
			element.appendChild(newDiv);
    }
  </script>

</body>
</html>

버튼을 눌러 새로운 div를 추가하고, HTML 구조를 보면 아래와 같이 기존 div에 새로운 div가 추가된 모습을 확인할 수 있습니다.

<div id="hello">안녕하세요?
  <div>반가워요!</div>
</div>
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha