웹브라우저 자바스크립트 - 문자열로 노드 제어

JavaScript/생활코딩

웹브라우저 자바스크립트 - 문자열로 노드 제어

점미 2018. 11. 28. 16:09

문자열로 노드 제어 - https://opentutorials.org/course/1375/6738

텍스트로 노드를 변경하는 방법

innerHTML

자주사용하는 API

읽기를 통해서 엘리먼트의 하위엘리먼트의 코드를 알 수 있다.

<!DOCTYPE html>

<html>

<body>

</ul>

function get(){

var target = document.getElementById('target'); //ul엘리먼트의 객체를 target에 담는다.

alert(target.innerHTML); //ul엘리먼트의 하위엘리먼트인 li엘리먼트들이 alert된다.

}

function set(){

var target = document.getElementById('target');

target.innerHTML = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>"; //ul엘리먼트의 하위엘리먼트들을 변경한다.

}

</script>

</body>

</html>

[get버튼을 눌렀을 때 실행화면]

[set버튼을 눌렀을 때 실행화면]

outerHTML

읽기를 통해서 엘리먼트와 하위엘리먼트의 코드를 알 수 있다.

<!DOCTYPE html>

<html>

<body>

</ul>

function get(){

var target = document.getElementById('target');

alert(target.outerHTML); //자기자신을 포함한 전체 엘리먼트를 보여줌

}

function set(){

var target = document.getElementById('target');

target.outerHTML = "<ol><li>JavaScript Core</li><li>BOM</li><li>DOM</li></ol>";

}

</script>

</body>

</html>

innerText, outerText

읽기를 하면 태그가 제외된 상태로 읽히고

쓰기를 하면 그 태그에 해당되는 내용이 아니라 태그내용 그대로가 반영된다.

<!DOCTYPE html>

<html>

<body>

</ul>

function get(){

var target = document.getElementById('target');

alert(target.innerText);

}

function set(){

var target = document.getElementById('target');

target.innerText = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";

}

</script>

</body>

</html>

[get버튼을 눌렀을 때 실행화면]

[set버튼을 눌렀을 때 실행화면]

insertAdjacentHTML()

정교하게 문자열을 이용해서 노드를 변경할 때 사용

<!DOCTYPE html>

<html>

<body>

</ul>

function beforebegin(){

var target = document.getElementById('target');

target.insertAdjacentHTML('beforebegin','<h1>Client Side</h1>'); //ul태그 전에 삽입된다.

}

function afterbegin(){

var target = document.getElementById('target');

target.insertAdjacentHTML('afterbegin','<li>HTML</li>'); //ul태그가 시작하는 첫번째에 삽입된다.

}

function beforeend(){

var target = document.getElementById('target');

target.insertAdjacentHTML('beforeend','<li>JavaScript</li>'); //ul태그가 끝나기전에 삽입된다.

}

function afterend(){

var target = document.getElementById('target');

target.insertAdjacentHTML('afterend','<h1>Server Side</h1>'); //ul태그가 끝나고 바로뒤에 삽입된다.

}

</script>

</body>

</html>

[beforebegin버튼을 눌렀을 때 실행화면]

[afterbegin버튼을 눌렀을 때 실행화면]

[beforeend버튼을 눌렀을 때 실행화면]

[afterend버튼을 눌렀을 때 실행화면]