insertAdjacentElement() 예제 - afterend 경우
<span style="color:red">홈페이지 제작관리</span>
<h2 id="hz">홈짱닷컴 Homzzang.com</h2>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var s = document.getElementsByTagName("span")[0];
var h = document.getElementById("hz");
h.insertAdjacentElement("afterend ", s);
}
</script>
결과보기
insertAdjacentElement() 정의
지정요소를 지정위치에 삽입 (IE8 이상)
insertAdjacentElement() 구문
node .insertAdjacentElement(position, element )
[매개변수]
position
필수. 요소(node )에 대한 상대적 위치를 표시하는 문자열.
afterbegin : 요소의 시작 직후 (= 첫 번째 자식으로)
afterend : 요소 뒤
beforebegin : 요소 앞
beforeend : 요소의 종료 이전 (= 마지막 자식으로)
element
필수. 삽입할 요소
insertAdjacentElement() 예제 - afterbegin 경우
<style>
span, h2 {border:1px solid silver;}
</style>
<span style="color:red">홈페이지 제작관리</span>
<h2 id="hz">홈짱닷컴 Homzzang.com</h2>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var s = document.getElementsByTagName("span")[0];
var h = document.getElementById("hz");
h.insertAdjacentElement("afterbegin ", s);
}
</script>
결과보기
insertAdjacentElement() 예제 - boforebegin 경우
<style>
span, h2 {border:1px solid silver;}
</style>
<h2 id="hz">홈짱닷컴 Homzzang.com</h2>
<span style="color:red">홈페이지 제작관리</span>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var s = document.getElementsByTagName("span")[0];
var h = document.getElementById("hz");
h.insertAdjacentElement("beforebegin ", s);
}
</script>
결과보기
insertAdjacentElement() 예제 - beforeend 경우
<style>
span, h2 {border:1px solid silver;}
</style>
<span style="color:red">홈페이지 제작관리</span>
<h2 id="hz">홈짱닷컴 Homzzang.com</h2>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var s = document.getElementsByTagName("span")[0];
var h = document.getElementById("hz");
h.insertAdjacentElement("beforeend ", s);
}
</script>
결과보기
