jQueryのafter()をJavaScriptで実装するサンプルコード

2023-07-19

jQueryのafter()メソッドは、指定した要素の直後に新しい要素を挿入するためのものです。同様の機能をJavaScriptで実装するには、以下のようなサンプルコードを使用することができます。

function insertAfter(newElement, targetElement) {
	var parent = targetElement.parentNode;
	if (parent.lastChild === targetElement) {
	parent.appendChild(newElement);
	} else {
	parent.insertBefore(newElement, targetElement.nextSibling);
	}
}

// 使用例
var newElement = document.createElement("div");
newElement.textContent = "新しい要素";

var targetElement = document.getElementById("target");
insertAfter(newElement, targetElement);

このサンプルコードでは、insertAfter()という関数を定義しています。この関数は2つの引数を取ります。第1引数newElementは挿入する新しい要素であり、第2引数targetElementは新しい要素を挿入する対象となる要素です。

関数内部では、targetElementの親要素を取得し、targetElementがその親要素の最後の子要素であるかどうかをチェックしています。もし最後の子要素であれば、parent.appendChild(newElement)を使用して新しい要素を親要素の最後に追加します。そうでなければ、parent.insertBefore(newElement, targetElement.nextSibling)を使用して新しい要素をtargetElementの直後に挿入します。

上記のサンプルコードを実行すると、targetElementの直後に新しい要素が挿入されます。ただし、targetElementや新しい要素は適切な要素を参照している必要があります。