h-sao/gist:a656b55a9928a8678a84

## gistfile1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="virtualdom.js"></script>
</head>
<body>
    <div>
        <input type="text" name="todo" />
        <button name="add" type="button">add</button>
    </div>
    <div class="list">

    </div>

    <script>
        var todos = [],
            textbox = document.querySelector("[name=todo]");  // Textbox
        document.querySelector("[name=add]").addEventListener("click", function () {
            var todoText = textbox.value;
            todos.push(todoText);

            var newTodoVDOM = createVDom(todos);    // 新しいVirtualDOMを作る
            var patch = virtualDom.diff(todoVDOM, newTodoVDOM);  // パッチ作る

            todoNode = virtualDom.patch(todoNode, patch);       // パッチ適用
            todoVDOM = newTodoVDOM;

        }, false)

        // ここでVirtualDOMを組み立てる
        function createVDom(todolist) {
            var textVDoms = todolist.map(function (todo) {
                return virtualDom.h("div", {}, [
                    virtualDom.h("span", {}, todo)
                ]);
            });

            return virtualDom.h("div", {}, textVDoms);
        }

        // createVDom()では、JavaScriptの世界で勝手に作ったDOMが出来ただけ
        // これを、実際のHTMLが判断できるDOMにしてあげる必要がある
        var todoVDOM = createVDom(todos);           // VirtualDOM作成
        var todoNode = virtualDom.create(todoVDOM); // DOM作成
        document.querySelector(".list").appendChild(todoNode);  // DOM Treeに追加

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title></title>
	<script src="virtualdom.js"></script>
	</head>
	<body>
	<div>
	<input type="text" name="todo" />
	<button name="add" type="button">add</button>
	</div>
	<div class="list">

	</div>

	<script>
	var todos = [],
	textbox = document.querySelector("[name=todo]"); // Textbox
	document.querySelector("[name=add]").addEventListener("click", function () {
	var todoText = textbox.value;
	todos.push(todoText);

	var newTodoVDOM = createVDom(todos); // 新しいVirtualDOMを作る
	var patch = virtualDom.diff(todoVDOM, newTodoVDOM); // パッチ作る

	todoNode = virtualDom.patch(todoNode, patch); // パッチ適用
	todoVDOM = newTodoVDOM;

	}, false)

	// ここでVirtualDOMを組み立てる
	function createVDom(todolist) {
	var textVDoms = todolist.map(function (todo) {
	return virtualDom.h("div", {}, [
	virtualDom.h("span", {}, todo)
	]);
	});

	return virtualDom.h("div", {}, textVDoms);
	}

	// createVDom()では、JavaScriptの世界で勝手に作ったDOMが出来ただけ
	// これを、実際のHTMLが判断できるDOMにしてあげる必要がある
	var todoVDOM = createVDom(todos); // VirtualDOM作成
	var todoNode = virtualDom.create(todoVDOM); // DOM作成
	document.querySelector(".list").appendChild(todoNode); // DOM Treeに追加

	</script>
	</body>
	</html>