insertAdjacentHTML
: 지정된 위치에 HTML 문자열을 삽입한다.
필수적인 요소이며, HTML 문자열을 삽입할 위치를 나타내는 문자열이다.
beforeBegin HTML 문자열 "<b>AAA</b>"를 개체의 바로 전에 삽입한다.
afterBegin HTML 문자열 "<b>AAA</b>"를 개체가 시작되고 모든 다른 내용들 전에 삽입한다.
beforeEnd HTML 문자열 "<b>AAA</b>"를 개체가 종료되기 전에 모든 다른 내용들 다음에 삽입.
afterEnd HTML 문자열 "<b>AAA</b>"를 개체가 종료된 바로 다음에 삽입한다.
여기서 개체가 시작된다는 것은 <div>태그가 열린것을 의미한다.
따라서 beforeBegin은 div 태그전에 삽입되고 afterBegin은 div 태그후에 삽입 beforeEnd는 div태그 종료전 afterEnd는 div태그 종료후에 삽입됨을 의미한다.
ex)
<html>
<head>
<style type="text/css">
#result {
position:absolute;
left:100px; top:100px;
background-color:yellow;
}
</style>
<script>
function aaa(){
//target.insertAdjacentHTML("beforeBegin","<b>AAA</b>");
// 출력결과 <b>AAA</b><div id="target">가나다</div>
//target.insertAdjacentHTML("afterBegin","<b>AAA</b>");
// 출력결과 <div id="target"><b>AAA</b>가나다</div>
//target.insertAdjacentHTML("beforeEnd","<b>AAA</b>");
// 출력결과 <div id="target">가나다<b>AAA</b></div>
//target.insertAdjacentHTML("afterEnd","<b>AAA</b>");
// 출력결과 <div id="target">가나다</div><b>AAA</b>
result.innerText=divObj.innerHTML;
}
</script>
</head>
<body>
<input type="button" onclick="aaa()">
<div id="divObj"><div id="target">가나다</div></div>
<div id="result"></div>
</body>
</html>
'javascript' 카테고리의 다른 글
| 자바스크립트 (0) | 2013.10.24 |
|---|---|
| <a>문서연결,문서내연결,상자위치 지정,이벤트 처리방식,String객체 (0) | 2013.10.22 |
| # 노드관련 메서드 (insertBefore,replaceChild,removeChild,appendChild) (0) | 2013.10.20 |
| innerText,innerHTML의 차이점? (0) | 2013.10.20 |
| innerHTML을 활용한 테이블 생성하기 (0) | 2013.10.19 |
