Javascript đã cung cấp " insertAdjacentElement () "để chèn một phần tử đã tồn tại vào một vị trí được chỉ định. Nếu có nhiều phần tử trùng tên thì hãy sử dụng các chỉ mục để truy cập chúng khi chúng tôi truy cập các phần tử mảng.
cú pháp
node.insertAdjacentHTML(position, element);
Ví dụ-1
Trong ví dụ sau, thực tế có 3 phần tử trong span1, span2 và tiêu đề song song. Sử dụng phương thức insertAdjacentElement () chúng tôi đã đặt phần tử span1 bên dưới tiêu đề như được hiển thị trong đầu ra.
<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> Đầu ra
My span2 My Header My span1
Ví dụ-2
Trong ví dụ sau, thực tế có 3 phần tử song song span1, span2 và tiêu đề . Sử dụng phương thức insertAdjacentElement () chúng tôi đã đặt phần tử span2 bên dưới tiêu đề như được hiển thị trong đầu ra. nếu có nhiều phần tử, hãy truy cập các phần tử như một mảng, truy cập thông qua các chỉ mục.
<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> Đầu ra
My span1 My Header My span2