DOM操作の簡略化：
Nodeを複製して、指定Nodeに追加する
既存Nodeの子Nodeを全て複製して、指定したNode内に追加または上書きする。
複製元のNodeを残す／削除の指定も可能。
Node1
複製元のNodeを渡す id値を文字列で指定してもよい
Node2
複製先のNodeを渡す id値を文字列で指定してもよい
Bool1
複製先に上書き true = 上書き ・ false = 追加
Bool2
複製元のNodeを削除 true = 削除 ・ false = 残す ／ 省略した場合は true となる
●必須引数 ●オプション引数(省略可能)
記述例
$nodeToNode($id('aNode'), $id('tarNode'), true)
$nodeToNode('aNode', 'tarNode', false, false)
注意点
複製した子Nodeにはid値が設定されている可能性があり、複製によってページ内に同一のid値が複数存在してしまう可能性も考慮して使用すること。
動作サンプル
複製元の内容を残したまま複製して、複製先に追加する。繰り返し実行も可能な状態。
複製元のボールドテキスト
複製先Node
HTML :
<div id="base1"><b style="color: #4a787d">複製元のボールドテキスト</b></div>
<div id="target1">複製先Node</div>
Javascript :
$nodeToNode('base1','target1',false,false);
複製元の内容を複製して削除し、複製先に上書きする。複製元の内容は削除されるが、<div>枠は残る。
複製元のボールドテキスト
○複製元のパラグラフ-1
○複製元のパラグラフ-2
複製先Node
HTML :
<div id="base2">
<b style="color: #4a787d">複製元のボールドテキスト</b>
<p>○複製元のパラグラフ-1</p>
<p>○複製元のパラグラフ-2</p>
</div>
<div id="target2">複製先Node</div>
Javascript :
$nodeToNode('base2','target2',true);
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。