HTML DOM insertAdjacentHTML() 메서드는 지정된 위치에 텍스트 문자열을 HTML로 삽입합니다.
구문
다음은 구문입니다 -
positionString 및 HTML 코드의 매개변수로 insertAdjacentHTML() 호출
node.insertAdjacentHTML(“positionString”, “htmlString”)
위치 문자열
여기, “ positionString” 다음과 같을 수 있습니다 -
positionString | 설명 |
---|---|
시작 후 | 노드 요소의 시작 부분 뒤에 htmlString을 삽입합니다. |
후단 | 노드 요소 뒤에 htmlString을 삽입합니다. |
시작 전 | 노드 요소 앞에 htmlString을 삽입합니다. |
이전 | 노드 요소의 끝에 htmlString을 삽입 |
HTML 문자열
"htmlString"은 다음과 같을 수 있습니다. -
위치 문자열 | 새 범위 또는 새 단락입니다 또는 기타 유효한 HTML 코드 |
예시
InsertAdjacentHTML()의 예를 살펴보겠습니다. 방법 -
<!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>
출력
이것은 다음과 같은 출력을 생성합니다 -
'아들 탄생을 클릭하기 전에 ' 버튼 -
'아들 탄생 클릭 후 ' 버튼 -