JS之DOM增添元素节点

最新推荐文章于 2023-02-08 09:50:29 发布

华籍美人_Sun

最新推荐文章于 2023-02-08 09:50:29 发布

阅读量298

点赞数

分类专栏：前端三件套 (杂) 文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_56174842/article/details/128789368

版权

前端三件套 (杂) 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS之DOM增添元素节点

Way1：

document.createElement()，可以用于创建一个元素节点对象

Way2：

利用innerHTML

Way3（常用）：

前两种方式结合

示例：

【html文件】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style/css.css" />
    <script type="text/javascript">

        window.onload = function () {

            //创建一个"广州"节点,添加到#city下
            myClick("btn01", function () {
                //创建广州节点 <li>广州</li>
                //创建li元素节点
                /*
                 * document.createElement()
                 * 	可以用于创建一个元素节点对象，
                 * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
                 * 	并将创建好的对象作为返回值返回
                 */
                var li = document.createElement("li");

                //创建广州文本节点
                /*
                 * document.createTextNode()
                 * 	可以用来创建一个文本节点对象
                 *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
                 */
                var gzText = document.createTextNode("广州");

                //将gzText设置li的子节点
                /*
                 * appendChild()
                 * 	 - 向一个父节点中添加一个新的子节点
                 * 	 - 用法：父节点.appendChild(子节点);
                 */
                li.appendChild(gzText);

                //获取id为city的节点
                var city = document.getElementById("city");

                //将广州添加到city下
                city.appendChild(li);


            });

            myClick("btn02", function () {

                //向city中添加广州
                var city = document.getElementById("city");

                city.innerHTML += "<li>广州</li>";


            });

            myClick("btn03", function () {

                //向city中添加广州
                var city = document.getElementById("city");

                /*
                 * 使用innerHTML也可以完成DOM的增删改的相关操作
                 * 但是它类似于将四个li整体换为五个li
                 * 这样不利于性能提升
                 * 一般我们会两种方式结合使用
                 */

                //创建一个li
                var li = document.createElement("li");
                //向li中设置文本
                li.innerHTML = "广州";
                //将li添加到city中
                city.appendChild(li);

            });
        };

        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }

    </script>

</head>

<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市?
            </p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>

        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">Way1-创建一个"广州"节点,添加到#city下</button></div>
        <div><button id="btn02">Way2-创建一个"广州"节点,添加到#city下</button></div>
        <div><button id="btn03">Way3-创建一个"广州"节点,添加到#city下</button></div>
    </div>
</body>

</html>

【css文件】

#total {
    width: 450px;
    margin-left: auto;
    margin-right: auto;
}

ul {
    list-style-type: none;
}

li {
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin: 5px;
    background-color: #99ff99;
    float: left;
}

.inner {
    width: 400px;
    border-style: solid;
    border-width: 1px;
    margin: 10px;
    padding: 10px;
    float: left;
}

#employeeTable {
    border-spacing: 1px;
    background-color: black;
    margin: 80px auto 10px auto;
}

th,
td {
    background-color: white;
}

#formDiv {
    width: 250px;
    border-style: solid;
    border-width: 1px;
    margin: 50px auto 10px auto;
    padding: 10px;
}

#formDiv input {
    width: 100%;
}

.word {
    width: 40px;
}

.inp {
    width: 200px;
}