概要: このチュートリアルでは、JavaScript の after() メソッドを使用して、要素の後にノードを挿入する方法を学びます。
JavaScript after() メソッドの紹介
after() は Element 型のメソッドです。 element.after() メソッドを使用すると、element の後に1つ以上のノードを挿入できます。
after() メソッドの構文は次のとおりです。
Element.after(node)Code language: JavaScript (javascript)この構文では、after() メソッドは DOM ツリー内の要素の後にノードを挿入します。
たとえば、<h1> 要素があり、その後に <p> 要素を挿入する場合、after() メソッドを次のように使用できます。
h1.after(p)Code language: JavaScript (javascript)要素の後に複数のノードを挿入するには、ノードを after() メソッドに次のように渡します。
Element.after(node1, node2, ... nodeN)Code language: JavaScript (javascript)after() メソッドは、1つ以上の文字列も受け入れます。この場合、after() メソッドは文字列を Text ノードとして扱います。
Element.after(str1, str2, ... strN)Code language: JavaScript (javascript)after() メソッドは undefined を返します。ノードを挿入できない場合は、HierarchyRequestError 例外がスローされます。
JavaScript after() の例
JavaScript の after() メソッドを使用する例をいくつか見てみましょう。
1) JavaScript after() を使用して要素の後にノードを挿入する
次の例では、after() メソッドを使用して、<h1> 要素の後に段落を挿入します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM - after()</title>
</head>
<body>
<h1>JavaScript DOM - after()</h1>
<script>
const h1 = document.querySelector('h1');
// create a new paragraph element
const p = document.createElement('p');
p.innerText = 'This is JavaScript DOM after() method demo';
// insert the paragraph after the heading
h1.after(p);
</script>
</body>
</html>Code language: HTML, XML (xml)仕組み
まず、querySelector() メソッドを使用して見出し要素を取得します。
const h1 = document.querySelector('h1');Code language: JavaScript (javascript)次に、新しい段落要素を作成し、その innerText を設定します。
const p = document.createElement('p');
p.innerText = 'This is JavaScript DOM after() method demo';Code language: JavaScript (javascript)3番目に、<h1> 要素の後に <p> 要素を挿入します。
h1.after(p);Code language: JavaScript (javascript)2) JavaScript after() を使用して要素の後に複数のノードを挿入する
次の例では、after() メソッドを使用して、要素の後に複数のノードを挿入します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM - after()</title>
</head>
<body>
<ul>
<li>Angular</li>
<li>Vue</li>
</ul>
<script>
const list = document.querySelector('ul');
const libs = ['React', 'Meteor', 'Polymer'];
const items = libs.map((lib) => {
const item = document.createElement('li');
item.innerText = lib;
return item;
});
list.lastChild.after(...items);
</script>
</body>
</html>Code language: HTML, XML (xml)仕組み
まず、querySelector() メソッドを使用して ul 要素を選択します。
const list = document.querySelector('ul');Code language: JavaScript (javascript)次に、文字列の配列を定義します。実際には、API 呼び出しから取得する場合があります。
const libs = ['React', 'Meteor', 'Polymer'];Code language: JavaScript (javascript)3番目に、map() メソッドを使用して、文字列の配列を li 要素の配列に変換します。
const items = libs.map((lib) => {
const item = document.createElement('li');
item.innerText = lib;
return item;
});Code language: JavaScript (javascript)最後に、ul 要素の最後の子の後にリスト項目要素を挿入します。
list.lastChild.after(...items);Code language: JavaScript (javascript)...items は、スプレッド演算子を使用して items 配列の要素を展開することに注意してください。
ul 要素は次のようになります。
<ul>
<li>Angular</li>
<li>Vue</li>
<li>React</li>
<li>Meteor</li>
<li>Polymer</li>
</ul>Code language: HTML, XML (xml)最後の3つの項目（React、Meteor、Polymer）は、<ul> 要素の最後の子であった項目 Vue の後に挿入されました。
3) JavaScript after() を使用して文字列を挿入する
after() メソッドで文字列を使用すると、それらは Text ノードとして扱われます。例えば
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM - after()</title>
<style>
button {
padding: 0.75em 1em;
background-color: #F7DF1E;
color: #000;
cursor: pointer;
border-radius: 50vw;
}
</style>
</head>
<body>
<button>Donate Here</button>
<script>
const button = document.querySelector('button');
button.firstChild.after(' 🧡');
</script>
</body>
</html>Code language: HTML, XML (xml)まとめ
element.after()メソッドを使用して、要素の後に1つ以上のノードを挿入します。
