JavaScript 移動要素
Ammar Ali
2021年10月18日
このチュートリアルでは、JavaScript の appendChild() 関数を使用して、ある要素の子を別の親に移動する方法について説明します。
JavaScript の appendChild() 関数を使用して、ある要素の子を別の親に移動する
appendChild() 関数を使用して、JavaScript で 1つの要素の子を別の親に移動できます。appendChild() 関数は、指定された親に子を追加します。まず、getElementById() または querySelector() 関数を使用して実行できる JavaScript の要素を取得する必要があります。その後、複数の子がある場合は、ループを使用して各子を指定された親に移動する必要があります。ループはすべての子を 1つずつ追加し、親に追加する子がなくなると終了します。たとえば、いくつかの子を持つ 2つの要素を作成し、appendChild() 関数を使用して 1つの要素の子を別の要素に移動してみましょう。以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="First Parent Element"></div>
<div id="Second Parent Element">
<span>Hello World</span>
</div>
</body>
<script type="text/javascript">
var FirstParent = document.getElementById('First Parent Element');
var SecondParent = document.getElementById('Second Parent Element');
while (SecondParent.childNodes.length > 0) {
FirstParent.appendChild(SecondParent.childNodes[0]);
}
console.log(FirstParent.childNodes)
</script>
</html>
出力：
NodeList(3) [text, span, text]
上記のコードでは、最初の親要素には子がなく、2 番目の親要素には 1つの子があります。出力からわかるように、最初の親要素にも、ループの後の 2 番目の親要素と同じ子があります。console.log() 関数を使用して、最初の親要素の子を表示しました。このコードを関数に変換することもできるので、コード全体を再度記述する必要はありません。たとえば、上記のコードを、2つの親要素の ID を含む 2つの文字列パラメーターを受け入れる関数に変換してみましょう。この関数は、2 番目の引数の子を最初の引数の親に追加します。以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="First Parent Element"></div>
<div id="Second Parent Element">
<span>Hello World</span>
</div>
</body>
<script type="text/javascript">
function MoveChildren(first, second){
var FirstParent = document.getElementById(first);
var SecondParent = document.getElementById(second);
while (SecondParent.childNodes.length > 0) {
FirstParent.appendChild(SecondParent.childNodes[0]);
}
}
MoveChildren('First Parent Element','Second Parent Element');
console.log(document.getElementById('First Parent Element').childNodes)
</script>
</html>
出力：
NodeList(3) [text, span, text]
これで、ある要素の子を別の要素の親に移動したいときにいつでもこの関数を使用できます。
著者： Ammar Ali
