자바스크립트 "insertAdjacentElement()를 제공했습니다. " 지정된 위치에 이미 존재하는 요소를 삽입합니다. 동일한 이름을 가진 요소가 여러 개 있는 경우 배열 요소에 액세스할 때 인덱스를 사용하여 액세스합니다.
구문
node.insertAdjacentHTML(position, element);
예시-1
다음 예에는 실제로 병렬 span1, span2 및 header에 3개의 요소가 있습니다. insertAdjacentElement() 메서드 사용 span1 요소를 배치했습니다. 출력에 표시된 대로 헤더 아래에.
<html>
<body>
<span>My span1</span>
<span>My span2</span>
<h2 id="H2">My Header</h2>
<script>
var s = document.getElementsByTagName("span")[0];
var h = document.getElementById("H2");
h.insertAdjacentElement("afterend", s);
</script>
</body>
</html> 출력
My span2 My Header My span1
예시-2
다음 예에는 실제로 3개의 요소가 있습니다. 병렬 span1, span2 및 헤더 . insertAdjacentElement() 메서드 사용 span2 요소를 배치했습니다. 출력에 표시된 대로 헤더 아래에 있습니다. 여러 요소가 있는 경우 배열과 같은 요소에 액세스하고 인덱스를 통해 액세스합니다.
<html>
<body>
<span>My span1</span>
<span>My span2</span>
<h2 id="H2">My Header</h2>
<script>
var s = document.getElementsByTagName("span")[1];
var h = document.getElementById("H2");
h.insertAdjacentElement("afterend", s);
</script>
</body>
</html> 출력
My span1 My Header My span2