JavaScriptのinsertBeforeを使ってinsertAfterを実現

jQueryにあるinsertAfterは自分で自作できる。JavaScriptではinsertBefore()があるが、これは親から子の特定のノードを指定し、その直下にelementを追加する仕組みとなっているので、単純に追加したい子の次のノードであるnextSiblingを指定してやればいいだけ。

var before = document.createElement('div');
before.innerHTML = 'insertBefore';
var after = document.createElement('div');
after.innerHTML = 'insertAfter';
var element = document.getElementById('target');
element.parentNode.insertBefore(before, element);
element.parentNode.insertBefore(after, element.nextSibling);

HTMLをこんな感じで書く

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example - insertAfter</title>
</head>
<body>
<p id="target">Target</p>
<script src="test.js"></script>
</body>
</html>

HTMLファイルを開けばこの通り

f:id:hoge:20150318224049p:plain

例ではnextSiblingでnullが返っているが、nullの場合は最後に追加されるような仕様になっている。このコードまるごとGithubに乗っけといたので動かしたい人は見たってや

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA