DOM 조작 - 컨텐츠 추가하기
다른 글에선 HTML에 컨텐츠를 추가하거나 읽어줄 때 다음과 같은 방법을 사용한다고 했다.
선택된 요소 노도의 텍스트 값 확인: 'textContent'
선택된 요소 노도의 텍스트 값 확인: 'innerText'
선택된 요소 노도의 텍스트+태그까지 확인: 'innerHTML'
이 중에서 'innerHTML'은 텍스트 뿐 아니라 태그는 따로 분류하여 처리한다.
만약에 자바스크립트를 통해 HTML 화면상에 무언가 문서를 추가로 넣고 싶다면 'innerHTML'을 쓴다.
다만 'innerHTML'은 보안상의 문제를 일으킬 수 있다.
그렇다면 어떻게 해야 상대적으로 안전하게 HTML 화면에 내용을 추가해줄 수 있을까?
그럴 때는 각종 노드를 만들고 다루는 메서드를 이용하면 된다.
우선 간단하게 보면 다음과 같다.
createElement(tagname) : 태그 이름을 인자로 전달하여 요소를 생성한다.
createTextNode(txt) : 텍스트를 인자로 전달 받아 텍스트 노드를 생성한다.
appendChild(Node) : 인자로 전달한 노드를 마지막 자식 요소로 DOM 트리에 추가한다.
removeChild(Node) : 인자로 전달한 노드를 DOM 트리에서 제거한다.
자세한 사용법은 다음과 같다.
1. create 메서드 사용법
<body>
<div class="container"></div>
</body>
위와 같이 아무 내용도 없는 <div>에 내용을 추가해주는 함수 코드다.
<script>
let con = document.getElementsByClassName('container')[0];
function createList(text){
let p = document.createElement('p'); // p 태그 요소 노드 생성
let newtext = document.createTextNode(text); // 인자로 만든 텍스트를 이용해 텍스트 노드 생성
p.appendChild(newtext); // p 태그 요소 노드에 텍스트 노드를 자식으로 추가
con.appendChild(p); // div 태그 요소 노드에 p 태그 요소 노드 자식으로 추가
}
createList("테스트입니다.");
</script>
해당 함수를 실행하면 다음과 같은 결과가 나타난다.
콘솔에서 생성한 <p>를 출력해보면 다음과 같다.
2. create 메서드와 innerHTML의 차이
'createElement()'메서드와 'createTextNode()'메서드 이용법을 알아봤다.
여기까진 좋다.
그런데 이게 'innerHTML'을 대신한다는걸까?
아래는 위의 내용을 실행하기 전 아무 내용이 없는 <div>태그다.
이제 여기에 붉은색 글씨를 추가해줄 예정이다.
<body>
<div class="container"></div>
</body>
그리고 아래는 각각 'create'메서드와 'innerHTML'에 원하는 텍스트를 넣을 수 있는 함수다.
<script>
let con = document.getElementsByClassName('container')[0];
function createList(text){
let p = document.createElement('p'); // p 태그 요소 노드 생성
let newtext = document.createTextNode(text); // 인자로 만든 텍스트를 이용해 텍스트 노드 생성
p.setAttribute('style', 'color : red');
p.appendChild(newtext); // p 태그 요소 노드에 텍스트 노드를 자식으로 추가
con.appendChild(p); // div 태그 요소 노드에 p 태그 요소 노드 자식으로 추가
}
createList("<span style='color : red'> innerHTML 테스트입니다 </span>");
function inner(text){
let p = document.createElement('p'); // p 태그 요소 노드 생성
p.innerHTML = text; // p태그에 innerHTMl로 텍스트 삽입
con.appendChild(p); // div 태그 요소 노드에 p 태그 요소 노드 자식으로 추가
}
inner("<span style='color : red'> innerHTML 테스트입니다 </span>");
</script>
두 함수에 아래의 텍스트를 넣은 결과는 다음과 같다.
|
<span style='color : red'> innerHTML 테스트입니다 </span> |
'textContent'를 이용할 때와 달리 'create' 메서드만으로도 'innerHTML'을 넣었을 때와 같은 효과를 낸다.
즉 이제 사용자가 입력한 텍스트를 사용자 개입없이도 다양한 방식으로 화면에 표현할 수 있다는 것이다.