-
웹브라우저 자바스크립트 - 문자열로 노드 제어JavaScript/생활코딩 2018. 11. 28. 16:09
문자열로 노드 제어 - https://opentutorials.org/course/1375/6738
텍스트로 노드를 변경하는 방법
- innerHTML
자주사용하는 API
읽기를 통해서 엘리먼트의 하위엘리먼트의 코드를 알 수 있다.
<!DOCTYPE html>
<html>
<body>
<ul id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="get();" value="get" />
<input type="button" onclick="set();" value="set" />
<script>
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 id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="get();" value="get" />
<input type="button" onclick="set();" value="set" />
<script>
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 id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="get();" value="get" />
<input type="button" onclick="set();" value="set" />
<script>
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 id="target">
<li>CSS</li>
</ul>
<input type="button" onclick="beforebegin();" value="beforebegin" />
<input type="button" onclick="afterbegin();" value="afterbegin" />
<input type="button" onclick="beforeend();" value="beforeend" />
<input type="button" onclick="afterend();" value="afterend" />
<script>
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버튼을 눌렀을 때 실행화면]
'JavaScript > 생활코딩' 카테고리의 다른 글
웹브라우저 자바스크립트 - Text 객체 (0) 2018.11.28 웹브라우저 자바스크립트 - Document 객체 (0) 2018.11.28 웹브라우저 자바스크립트 - 노드 변경 API (0) 2018.11.28 웹브라우저 자바스크립트 - 노드 종류 API (0) 2018.11.27 웹브라우저 자바스크립트 - Node 관계 API (0) 2018.11.27 댓글
