innerHTMLでscript要素を追加したり、既に実行されたscript要素をcloneNodeでコピーしてそれを追加しても処理は実行されない。script要素を実行するには、createElementで新たにscript要素を作り、appendChildで追加する必要がある。

例えば、Ajaxなどでhtmlを書き換える時、同時にscript要素にある処理も実行したい場合、新たにscript要素を作ってそこに実行したい処理をコピーしなければいけない。そういう時に使えるスクリプトを書いた。

function cloneScript(element) {
	var script = document.createElement('script');
	var attrs = element.attributes;
	for(var i = 0, len = attrs.length; i < len; i++) {
		var attr = attrs[i];
		script.setAttribute(attr.name, attr.value);
	}
	script.innerHTML = element.innerHTML;
	return script;
}

引数に指定されたscript要素の属性と処理内容をコピーした新しく作られたscript要素を返すので、src属性で外部jsファイルを指定しているscript要素や、script要素内に直接処理の書かれているscript要素どちらでも問題ないはず。

例えば以下のようなscript要素を再度実行する場合

<script class="origin">alert('hello');<script>

var origin = document.querySelector('.origin');
document.body.appendChild(cloneScript(origin)); //'hello'とalertが鳴る;

こんな感じで使える。