指定した要素～/要素をクローンできるようなjsはないでしょうか

Question

以前、動的にセレクトボックスを作れないかという質問をさせて頂きましたが、
あれから少しDOMについて学習し、

・createElementで要素を作り
・setAttributeで要素のプロパティを作り
・getElementByIdで既存idを取得し
・appendChildでcreateElementで作った要素を追加する

ということを知りました。

例えばこんな感じで作れたりしますよね。

<script type="text/javascript">
var num = 2;
function input(){
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name",num);
document.getElementById("input").appendChild(input);
num++;
}
</script>
<input type="text" name="num1">
<div id="input"></div>
<input type="button" value="増加" onClick="input()">

自分がめんどくさがりだとは思うんですが、
下記の<tr></tr>までの内容を全部クローンするような機能はなにかないものでしょうか？

<tr>
	<td>
		<select style="" name="programs1">
			<?php echo Programmerskill::getSkill(); ?>
		</select>
	</td>
	<td>
		<select style="" name="programs_year1">
			<?php echo Skillyear::getYear(); ?>
		</select>
	</td>
</tr>

外部ファイルからクラス呼び出しているのでそれに合わせてイチからjs作るのはちょっと...
ってなって質問してみました。

inputを動的に追加する為のjsは上記みたいな感じで簡単に作れますよ。
input単一ですから。

ただ、既にあるselectboxと同じものを動的に追加する為のjsを作るのは...
optionが２、３個ならいいですが（いや、２、３個でもしんどい）
optionが１０個とか多数ある場合は
どうやったらいいんでしょうか？

色んなサイトみてもわからないから、最終的にここで質問しています。
コードと解説しているリンク先を頂けるのはありがたいですが、
それで分からないからここで質問してます。
分かりやすく解説頂けるとありがたいです。

ちなみに

<?php echo Programmerskill::getSkill(); ?>

はこうなってます。

<?php echo Skillyear::getYear(); ?>

も配列の中身が違うだけで同じ作りです。

<?php
class Programmerskill {
	function getSkill(){
		$options = array(
			'HTML',
			'CSS',
			'JavaScript',
			'PHP',
			'SQL',
			'Perl',
			'Ruby',
			'Python',
			'JAVA',
			'Objective-C',
			'Swift',
			'Unity');
		for ($i=0; $i < count($options); $i++) {
			$attr = $options [$i] == 'JAVA' ? ' selected' : '';
			echo "<option value=".$options[$i].$attr.">".$options[$i]."</option>";
		}
	}
}
?>

こんな感じで作っていくしかないのでしょうか？

<script type="text/javascript">
function add(){
var tr = document.createElement("tr");
var td = document.createElement("td");
var select = document.createElement("select");
var option = document.createElement("option");
select.setAttribute("name","programs[]");
option.setAttribute("value","HTML");
option.appendChild( document.createTextNode("HTML") );
/*option量産...*/
document.getElementById("target").appendChild(tr).appendChild(td).appendChild(select).appendChild(option);
}
</script>

ただこの場合、function getSkill()の配列が増減したら
それに合わせてjsの方の増減も手動で行わなくてはいけません...

なにか良法はないでしょうか...

Answer 1

Node.prototype.cloneNode

cloneNode を使用してください。

• Node.cloneNode - Web API インターフェイス | MDN

var trClone = tr.cloneNode(true);

Re: rento さん

Comments

[earnest_gay]

回答ありがとうございます！
リンク先見ると、まさに探していたようなものでした！

まだ試していないのですが、時間あるときに試させてもらいますね！

[earnest_gay]

Node.cloneNodeすごいです！これは便利です！
思っていたとおりのことができました！

ありがとうございました！