节点创建jquery js创建一个子节点

转载

lingyuli 2024-01-03 12:32:43

文章标签 节点创建jquery javascript 子节点 html 元素节点 文章分类 jQuery 前端开发

创建一个元素节点、文本节点、为元素节点添加子节点（基础版）

节点创建jquery js创建一个子节点_html

创建一个元素节点、文本节点、为元素节点添加子节点（加强版）

效果如图：（并进行类型和数据的两次判空操作！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加强版创建节点</title>
    <script>
        //需求：点击submit按钮时，检查是否选择type，没有则给出提示；检查文本框是否有输入内容，没有则给出提示
        //检查都通过则可以添加相应的子节点
        window.onload = function () {
        //1. 获取#submit对应的按钮 submitbtn
            var submit = document.getElementById("submit");
        //2. 为submitbtn添加onclick响应函数
            submit.onclick = function () {
                //4. 检查类型是否被选中，如果没有选择给出提示：“请选择类型”
                //4.1 选择所要name="type"的节点
                var types = document.getElementsByName("type")
                //4.2 遍历types，检查其是否有一个type的checked属性存在（为真），说明有一个type被选中
                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){
                    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;
                //7. 把nameval和""进行比较，若是""说明只输入了空格，弹出“请输入内容”，方法结束：return false
                if (nameval == ""){
                    alert("请输入内容！");
                    return false
                }
                //8. 创建li 节点
                var linode = document.createElement("li");
                //9. 利用nameval创建文本节点
                var content = document.createTextNode(nameval);
                //10. 把9加为8的子节点
                linode.appendChild(content);
                //11. 把8加为选中的type对应的ul的子节点
                document.getElementById(typeval).appendChild(linode);
                return false
            }


            //3. 在onclick响应函数的结尾处添加 return false，就可以取消提交按钮的默认行为；
        }
    </script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id = "city">
    <li id = 'bj' name = "beijing">北京</li>
    <li>上海</li>
    <li>成都</li>
    <li>拉萨</li>
</ul>
<br><br>
<p>你喜欢哪个游戏？</p>
<ul id = "game">
    <li id = 'rl'>和平精英</li>
    <li>王者荣耀</li>
    <li>绝地求生</li>
    <li>我爱换装</li>
</ul>
<br><br>
<form action="dom7.html" name="myform">
    <input type="radio" checked = "checked" name = "type" value="city">城市
    <input type="radio" name = "type" value="game">游戏
    name： <input type="text" name="name">
    <input type="submit" value = "submit" id = "submit">
</form>
</body>
</html>