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

HTML DOM insertAdjacentElement（）メソッド

HTML DOMのinsertAdjacentElement（）メソッドは、指定された位置に要素を挿入します。

構文

以下は構文です-

positionStringおよびelementのパラメーターを使用してinsertAdjacentElement（）を呼び出す

node.insertAdjacentElement(“positionString”, element)

位置文字列

ここでは、「positionString」 次のようになります-

positionString
説明
afterbegin
ノード要素の先頭の後に要素を挿入します
アフターエンド
ノード要素の後に要素を挿入します
開始前
ノード要素の前に要素を挿入します
ビフォアエンド
ノード要素の終わりの前に要素を挿入します

例

InsertAdjacentElement（）の例を見てみましょう メソッド-

<!DOCTYPE html>
<html>  
<head>
<title>insertAdjacentElement()</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>insertAdjacentElement( )</legend>
<h1>Family Tree</h1>
<span id="Father">Father --></span>
<span id="GrandFather">Grand Father --></span>
<span id="Myself">Myself</span>
<input type="button" onclick="rectifyTree()" value="Correct Family Tree">
</fieldset>
</form>
<script>
   function rectifyTree() {
      var FSpan = document.getElementById("Father");
      var GFSpan = document.getElementById("GrandFather");
      GFSpan.insertAdjacentElement("afterend", FSpan);
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

「正しい家系図」をクリックする前に ボタン-

HTML DOM insertAdjacentElement（）メソッド

[正しい家系図]をクリックした後 ボタン-

HTML DOM insertAdjacentElement（）メソッド


  1. HTML DOM focus（）メソッド

    HTML DOM focus（）メソッドは、HTML要素にフォーカスを与えるために使用されます。フォーカスをすべてのHTML要素に適用することはできません。例：タグにフォーカスすることはできません。要素からフォーカスを削除するには、blur（）メソッドを使用します。 構文 以下は構文です- HTMLElementObject.focus() 例 focus（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <style>    input[type=text]:focus, p:

  2. HTMLDOMオブジェクトオブジェクト

    HTMLのHTMLDOMオブジェクトオブジェクトは、 を表します 要素。 要素の作成 var objectElement = document.createElement(“OBJECT”) ここでは、「 objectElement 」は次のプロパティを持つことができます- プロパティ 説明 データ objectelementによって使用されているリソースのURLを設定/返します フォーム オブジェクト要素の囲み形式への参照を返します 高さ オブジェクト要素の高さを設定/返します 名前 オブジェクト要素の