<!DOCTYPE html> <html lang="ko"> <head> <meta name="viewport" content="width=device-width"> <meta charset="UTF-8"> <!-- <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css"> --> <title>innerHTML</title> </head> <body> <h1 id="hi">Hi, guys!</h1> <script> // #hi 요소의 내부 텍스트 뒤에 " Nice to meet you!" 문자열을 추가 // → 1. DOM에서 #hi 요소를 표현하는 HTMLElement 객체를 탐색 // 2. HTMLElement 객체의 innerHTML 속성으로 HTML 요소의 내부 마크업을 설정 // 1. DOM에서 #hi 요소를 표현하는 HTMLElement 객체를 탐색 var hi = document.getElementById('hi'); console.log('hi.innerHTML = ' + hi.innerHTML); console.log('hi.innerText = ' + hi.innerText); console.log('hi.textContent = ' + hi.textContent); // 2. HTMLElement 객체의 innerHTML 속성으로 HTML 요소의 내부 마크업을 설정 // hi.innerHTML = hi.innerHTML + ' Nice to meet you!'; hi.innerHTML += ' Nice to meet you!'; </script> <hr> <h1 id="hey">Hey!</h1> <script> // "Good evening!" 문자열을 내부 텍스트로 가지는 <i> 요소를 #hey 요소에 추가 // 1. DOM에서 #hey 요소를 표현하는 HTMLElement 객체를 탐색 // var hey = document.getElementById('hey'); // 2. HTMLElement 객체의 innerHTML 속성으로 HTML 요소의 내부 마크업을 설정 // hey.innerHTML = hey.innerHTML + ' <i>Good evening!</i>'; // hey.innerHTML += ' <i> Good evening!</i>'; // hey.textContent += ' <i>Good evening!</i>'; // → Hey! <i>Good evening!</i>; document.getElementById('hey').innerHTML += ' <i>Good evening!</i>'; // id가 hey인 요소를 찾아 parents에 대입 // var parents = document.getElementById('hey'); // i요소를 만들어 child에 대입 // var child = document.createElement('i'); // child의 innerText에 'Good Evening' 대입 // child.innerText = 'Good Evening!' // parents의 끝에 child를 추가 // parents.appendChild(child); // console.log(parents.innerHTML); </script> <hr> <ul id="list"> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.naver.com">Naver</a></li> <li><a href="http://www.daum.com">Daum</a></li> </ul> <script> // #list 요소에 있는 <a> 요소들의 내부 텍스트 뒤에 참조 URL을 덧붙임 // 1. DOM에서 <a> 요소들을 표현하는 HTMLElement 객체들을 탐색 var links = document.querySelectorAll('#list > li > a'); // 반복문으로 배열 links의 원소들, 즉 HTMLElement 객체에 차례대로 접근 for(var i = 0; i <links.length; i++){ // 2. HTMLElement 객체의 속성이나 메서드로 HTML 요소의 href 속성 값을 참조 // var href = links[i].getAttribute('href'); // var href = links[i].href; // 3. HTML 요소의 href 속성 값을 HTML 요소의 내부 텍스트 뒤에 덧붙임 // links[i].innerHTML += ` (${href})`; links[i].innerHTML += `(${links[i].href})` } </script> </body> </html>
