サンプル７-サンプル６のコードをcreateDocumentFragmentを使って書き換えた例

あ
い
う
htmlソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプル７-サンプル６のコードをcreateDocumentFragmentを使って書き換えた例</title>
<script type="text/javascript">

window.onload = function(){
	var foo = document.getElementById("foo");
	var copySrc = document.getElementById("copySrc");
	
	function getRadioButtonValue(radioButtonId){
		var nodeTypes = document.getElementsByName(radioButtonId);
		for (var i = 0; i < nodeTypes.length; i++) {
			if (nodeTypes[i].checked) {
				return nodeTypes = nodeTypes[i].value;
			}
		}
	}
	
	function getNewNode(){
		var nodeTypes = document.getElementsByName("nodeType");
		var fragmentNode = document.createDocumentFragment();	// ***
		if(nodeTypes[0].checked){
			var newNode=document.createElement("div");
			var textNode=document.createTextNode("abc");
			newNode.appendChild(textNode)
		}else if(nodeTypes[1].checked){
			var newNode=copySrc.cloneNode(true);
		}
		fragmentNode.appendChild(newNode);	// *****
		return fragmentNode;	// ****
	}
	
	document.getElementById("appendChild").onclick=function(){
		foo.appendChild(getNewNode());
		return false;
	};

	document.getElementById("insertBefore").onclick=function(){
		foo.parentNode.insertBefore(getNewNode(),foo);
		return false;
	};

	document.getElementById("insertAfter").onclick=function(){
		foo.parentNode.insertBefore(getNewNode(),foo.nextSibling);
		return false;
	};
};
</script>
<style type="text/css">
div {
	margin-left: 50px;
	border: inset;
}
</style>
</head>
<body>
<h1>サンプル７-サンプル６のコードをcreateDocumentFragmentを使って書き換えた例</h1>
<hr />
<div id="copySrc">あ</div>
<div id="foo">い</div>
<div>う</div>
<form>
<h5>追加，挿入するノード</h5>
    <input type="radio" name="nodeType" checked="checked" value="elementNode" />&lt;div&gt;abc&lt;/div&gt;<br />
	<input type="radio" name="nodeType" value="cloneNode" />#copySrcノードのcloneNode<br />
<button id="appendChild">appendChild</button><br />
<button id="insertBefore">insertBefore</button><br />
<button id="insertAfter">insertAfter</button>
</form>
</body>
</html>