과거에는 HTML 콘텐츠와 텍스트 콘텐츠를 추가하는 데 innerHTML 및 innerText 메서드가 사용되었습니다. 최근에는 insertAdjacentHTML 및 insertAdjacentText 메서드도 더 유연하며 지정된 위치에 HTML 콘텐츠와 텍스트 콘텐츠를 삽입할 수 있다는 사실을 발견했습니다.
insertAdjacentHTML 메소드: 지정된 위치에 html 태그 문을 삽입합니다.
프로토타입: insertAdajcentHTML(swhere,stext)
매개변수:
swhere: html 태그 문을 삽입할 위치를 지정합니다. 사용 가능한 값은 4개입니다.
1. beforeBegin: 시작 전에 삽입합니다. tag
2. afterBegin: 태그의 시작 태그 뒤에 삽입
3. beforeEnd: 태그의 끝 태그 앞에 삽입
4. afterEnd: 태그의 끝 태그 뒤에 삽입
text: 삽입할 내용
DEOM:
<html>
<head >
<script 언어="javascript">
function myfun ()
{
var obj = document.getElementById("btn1")
obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">") ;
}
</script>
</head>
< body>
<input name="txt">
<input id="btn1" name="btn1" type="button" value="more..." onclick="myfun ()">
</body>
</ html>