javascript
javascript_(Dom)요소노드의텍스트조작_22.05.03(day10)
양빵빵
2022. 5. 3. 11:31
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#greet span {
color : red;
}
</style>
</head>
<body>
<div id="greet">
Hello <span>JavaScript!</span>
</div>
<script>
const $greet = document.getElementById('greet');
const text = $greet.textContent.trim(); // 엔터, 띄어쓰기 반영하여 추출
console.log(text);
// trim() : 문자열의 앞 뒤 공백 제거.
// textContent 사용시 공백을 없애고 싶다면 trim()을 사용.
//텍스트 수정
// $greet.textContent = 'Hello JS!'; // span 태그 사라짐
$greet.firstElementChild.textContent = 'JS!' // span 선택후 문자 수정
// $greet.textContent = '안녕 <span>JS!</span>';
$greet.innerHTML = '안녕 <span>JS!</span>';
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="fruits">
<li>사과</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</div>
<script>
const $fruits = document.getElementById('fruits');
console.log($fruits.innerHTML);
// ul 내부의 태그가 수정됨
$fruits.innerHTML = '<li class="grape">포도</li>';
// 자식태그 추가
$fruits.innerHTML += '<li class="orange">오렌지</li>';
// 자식태그 전체삭제
$fruits.innerHTML = '';
</script>
</body>
</html>