概要: このチュートリアルでは、JavaScript の before() メソッドを使用して、要素の前にノードを挿入する方法を学習します。
JavaScript before() メソッドの紹介
element.before() メソッドを使用すると、element の前に1つ以上のノードを挿入できます。以下は、before() メソッドの構文を示しています。
Element.before(node)Code language: JavaScript (javascript)この構文では、before() メソッドは DOM ツリー内の要素の前にノードを挿入します。
たとえば、<p> 要素があり、その前に <h1> 要素を挿入する場合、次のように before() メソッドを使用できます。
p.before(h1)Code language: JavaScript (javascript)要素の前に複数のノードを挿入するには、次のように before() メソッドにノードを渡します。
Element.before(node1, node2, ... nodeN)Code language: JavaScript (javascript)また、before() メソッドは、ノードではなく、1つ以上の文字列を受け入れます。この場合、before() メソッドは文字列を Text ノードとして扱います。
Element.before(str1, str2, ... strN)Code language: JavaScript (javascript)before() メソッドは undefined を返します。ノードを挿入できない場合、before() メソッドは HierarchyRequestError 例外をスローします。
JavaScript before() の例
JavaScript before() メソッドを使用する例をいくつか見てみましょう。
1) JavaScript before() を使用して要素の前にノードを挿入する
次の例では、before() メソッドを使用して、段落の前に <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 - before()</title>
</head>
<body>
<p>This is JavaScript DOM before() method demo.</p>
<script>
const p = document.querySelector('p');
// create a new h1 element
const h1 = document.createElement('h1');
h1.innerText = 'JavaScript DOM - before()';
// insert the h1 before the paragraph
p.before(h1);
</script>
</body>
</html>Code language: HTML, XML (xml)仕組み
まず、querySelector() メソッドを使用して <p> 要素を取得します。
const p = document.querySelector('p');Code language: JavaScript (javascript)次に、新しい見出し要素を作成し、その innerText を設定します。
const h1 = document.createElement('h1');
h1.innerText = 'JavaScript DOM - before()';Code language: JavaScript (javascript)3番目に、段落要素の前に <h1> 要素を挿入します。
p.before(h1);Code language: JavaScript (javascript)2) JavaScript before() を使用して要素の前に複数のノードを挿入する
次の例では、before() メソッドを使用して、要素の前に複数のノードを挿入します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM - before()</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.firstChild.before(...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.firstChild.before(...items);Code language: JavaScript (javascript)...items は、スプレッド演算子を使用して items 配列の要素を展開することに注意してください。
<ul> 要素は次のようになります。
<ul>
<li>React</li>
<li>Meteor</li>
<li>Polymer</li>
<li>Angular</li>
<li>Vue</li>
</ul>Code language: HTML, XML (xml)最初の3つの項目（React、Meteor、Polymer）は、<ul> 要素の最初の子であった項目 Angular の前に挿入されました。
3) JavaScript before() を使用して文字列を挿入する
before() メソッドで文字列を使用する場合、before() メソッドはそれらを 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 - before()</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.before('🧡 ');
</script>
</body>
</html>Code language: HTML, XML (xml)まとめ
element.before()メソッドを使用して、要素の前に1つ以上のノードを挿入します。
