JavaScript__2创建并加入节点

一、创建并加入节点
（1）创建一个元素节点：createElement() :按照给定的标签名创建一个新的元素节点
该方法只有一个参数：被创建的元素节点的名字，是一个字符串
方法的返回值：是一个指向新建街店的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值为1。
注：新元素节点不会自动添加到文档里，它只是一个存在于 JavaScript 上下文的对象。
（2）创建一个文本节点：createTextNode() :创建一个包含着给定文本的新文本节点。
（3）为元素节点添加子节点：

代码如下：

window.onload = function () {

            function showContent(liNode) {
                alert("^_^#" + liNode.firstChild.nodeValue);
            }

            var liNodes = document.getElementsByTagName("li");
            for (var i = 0; i < liNodes.length; i++) {
                liNodes[i].onclick = function () {
                    showContent(this);
                }
            }

            //1. 获取 #submit 对应的按钮 submitBtn
            var submit = document.getElementById("submit");

            //2. 为 submitBtn 添加 onclick 响应函数
            submit.onclick = function () {

                //4. 检查是否选择 type, 若没有选择给出提示: "请选择类型"
                //4.1 选择所有的 name="type" 的节点 types
                var types = document.getElementsByName("type");

                //4.2 遍历 types, 检查其是否有一个 type 的 checked 属性存在, 就可说明
                //有一个 type 被选中了: 通过  if(元素节点.属性名) 来判断某一个元素节点是否有
                //该属性.
                var typeVal = null;
                for (var i = 0; i < types.length; i++) {
                    if (types[i].checked) {
                        typeVal = types[i].value;
                        break;
                    }
                }

                //4.3 若没有任何一个 type 被选中, 则弹出: "请选择类型". 响应方法结束:
                //return false
                if (typeVal == null) {
                    alert("请选择类型");
                    return false;
                }

                //5. 获取 name="name" 的文本值: 通过 value 属性: nameVal
                var nameEle = document.getElementsByName("name")[0];
                var nameVal = nameEle.value;

                //6. 去除 nameVal 的前后空格.
                var reg = /^\s*|\s*$/g;
                nameVal = nameVal.replace(reg, "");

                //使 name 的文本框也去除前后空格.
                nameEle.value = nameVal;

                //6. 把 nameVal 和 "" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容"
                //方法结束: return false
                if (nameVal == "") {
                    alert("请输入内容");
                    return false;
                }

                //7. 创建 li 节点
                var liNode = document.createElement("li");

                //8. 利用 nameVal 创建文本节点
                var content = document.createTextNode(nameVal);

                //9. 把 8 加为 7 的子节点
                liNode.appendChild(content);

                //11. 为新创建的 li 添加 onclick 响应函数
                liNode.onclick = function () {
                    showContent(this);
                }

                //10. 把 7 加为选择的 type 对应的 ul 的子节点
                document.getElementById(typeVal)
                    .appendChild(liNode);

                //3. 在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的
                //默认行为.
                return false;
            }
        }