Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptの指定された位置に指定された要素を挿入しますか？

Javascript 「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

  1. JavaScriptを使用して親要素にアクセスする

    以下は、JavaScriptを使用して親要素にアクセスするためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> &

  2. JavaScriptでIDで要素を削除しますか？

    IDで要素を削除するには、remove（）を使用できます。 例 以下はコードです- <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>D