JavaScript cloneNode()とは？
JavaScriptのcloneNode()は、既存のHTML要素をコピーして、新しい要素を作成する機能です。
入力フォームなど、同じ形のHTMLを複数追加したい場合に使用できます。
例えば、「追加」ボタンを押したときに、既存の入力フォームをコピーして新しい入力フォームを追加することができます。
varoriginal=document.getElementById('order1');varclone=original.cloneNode(true);
cloneNode(true)
cloneNode()にtrueを指定すると、対象の要素だけではなく、その中にあるinput、div、labelなどの子要素もすべてコピーされます。
varclone=original.cloneNode(true);
falseの場合は、対象の要素だけがコピーされ、子要素はコピーされません。
コピーした要素を変更する
コピーした要素は新しいHTML要素として扱うことができるため、idや入力値などを変更できます。
clone.id='order'+order;clone.querySelector('input[name="mIdx[]"]').value='';
clone.querySelector('input[name="order[]"]').value=order;
このコードでは、コピーした要素のidを変更し、必要な入力値を初期化しています。
画面に追加する
コピーした要素はappendChild()を使って画面に追加できます。
document.getElementById('order-eara').appendChild(clone);
これにより、コピーした入力フォームがorder-earaの中に追加されます。
実際の動き
「追加」ボタンからaddReport()を実行するようにすると、
<buttontype="button"onclick="addReport()">追加</button>
「追加」ボタンを押すたびに、既存のorder1をコピーして、新しい入力フォームを追加できます。
まとめ
cloneNode()は、既存のHTML要素をコピーして、同じ形式の要素を動的に追加するときに使用する機能です。
簡単にすると、
追加ボタン → 既存要素をコピー → 値を初期化 → 新しい要素を追加
という流れになります。
