insertAdjacentHTML() 메서드란?
HTML DOM의 insertAdjacentHTML() 메서드는 텍스트 문자열을 HTML 코드로 해석하여 지정한 위치에 삽입하는 메서드입니다. innerHTML처럼 기존 콘텐츠 전체를 덮어쓰지 않고 원하는 위치에만 새 요소를 추가할 수 있어, 동적으로 콘텐츠를 확장할 때 성능 면에서도 유리합니다.
문법(Syntax)
insertAdjacentHTML() 메서드는 positionString과 HTML 코드 두 개의 매개변수를 받아 호출합니다.
node.insertAdjacentHTML("positionString", "htmlString")positionString 값
첫 번째 매개변수인 positionString에는 아래 네 가지 값 중 하나를 사용할 수 있습니다.
| positionString | 설명 |
|---|---|
| afterbegin | 노드 요소의 시작 부분(여는 태그 바로 뒤)에 htmlString을 삽입합니다. |
| afterend | 노드 요소 바로 뒤에 htmlString을 삽입합니다. |
| beforebegin | 노드 요소 바로 앞에 htmlString을 삽입합니다. |
| beforeend | 노드 요소의 끝 부분(닫는 태그 바로 앞)에 htmlString을 삽입합니다. |
htmlString 값
두 번째 매개변수인 htmlString에는 유효한 HTML 코드를 그대로 전달할 수 있습니다.
| 예시 | <span>new span</span>, <p>This is a new paragraph</p> 또는 그 밖의 모든 유효한 HTML 코드 |
예제
다음은 insertAdjacentHTML() 메서드의 실제 사용 예제입니다. 버튼을 클릭하면 'Myself' 요소 뒤에 'Son' 요소가 추가됩니다.
<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentHTML()</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>insertAdjacentHTML( )</legend>
<h1>Family Tree</h1>
<span id="GrandFather">Grand Father --></span>
<span id="Father">Father --></span>
<span id="Myself">Myself</span>
<input type="button" onclick="rectifyTree()" value="Son is born">
</fieldset>
</form>
<script>
function rectifyTree() {
var MSpan = document.getElementById("Myself");
MSpan.insertAdjacentHTML("afterend", "<span id='Son'>-->Son</span>");
}
</script>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'Son is born' 버튼을 클릭하기 전 −
'Son is born' 버튼을 클릭한 후 −
