js增删改查（元素）例子

最新推荐文章于 2022-09-01 02:23:41 发布
原创最新推荐文章于 2022-09-01 02:23:41 发布 · 8.1k 阅读
1 ·
CC 4.0 BY-SA版权
文章标签：
#javascript #js
前端同时被 2 个专栏收录
37 篇文章
订阅专栏
26 篇文章
订阅专栏
js的dom增删改查例子；
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>js-dom例子</title>
    </head>

    <body>
        <ul id="myList">
            <li>你好啊</li>
            <li>你吃饭了么</li>
        </ul>
        <script>
            function myFunction() {
                /*
                 * 1.声明变量，来接收createElement("li")创建的新标签。
                 * 2.声明变量，来接收createTextNode("你好")创建的新内容节点。
                 */
                var newItem = document.createElement("li"); //1
                var textnode = document.createTextNode("你好"); //2
                newItem.appendChild(textnode); //把新增的内容节点添加到新增的li标签节点中
                var list = document.getElementById("myList");
                list.insertBefore(newItem, list.childNodes[2]);
                //函数insertBefore()在子节点之前插入值。
            }
            myFunction();
        </script>
        <!--===================================================================================-->
        <div id="dom">
            <p>哈喽</p>
            <p>嗨</p>
        </div><br /><br />
        <script>
            function my() {
                /*
                 * 1.创建一个新的标签
                 * 2.创建新的内容
                 * 3.将新内容写到新标签中去。
                 * 4.获取id
                 * 5.将我们的标签写在页面中
                 * 6.调整它的位置
                 */
                var x = document.createElement("i");
                var c = document.createTextNode("吃了么");
                x.appendChild(c);
                var v = document.getElementById("dom");
                v.insertBefore(x, v.childNodes[4]);
            }
            my();
        </script>
        <!--===================================================================================-->
        <table border="1" cellspacing="0" cellpadding="0" id="dom1">
            <tr>
                <th>你好</th>
            </tr>
            <tr>
                <td>你好啊</td>
            </tr>
        </table><br /><br />
        <script>
            function mi() {
                /*
                 * 1.创建一个新的标签
                 * 2.创建新的内容
                 * 3.将新内容写到新标签中去。
                 * 4.获取id
                 * 5.将我们的标签写在页面中
                 * 6.调整它的位置
                 */
                var x = document.createElement("span");
                var c = document.createTextNode("吃了么");
                var d = document.createTextNode("我刚吃");
                x.appendChild(d);
                var v = document.getElementById("dom1");
                v.insertBefore(x, v.childNodes[2]);
            }
            mi();
        </script>
        <!--=================================================================================-->
        <button onclick="hi()">点击我增加尾部信息</button>
        <div id="dom2">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
        </div>
        <script type="text/javascript">
            function hi() {
                /*
                 * 函数appendChild()增加元素信息。
                 */
                var node = document.createElement("p");
                var textnode = document.createTextNode("7");
                node.appendChild(textnode);
                document.getElementById("dom2").appendChild(node);
            }
        </script>

        <!--===================================================================================-->

        <ul id="myLists">
            <li>1</li>
            <li>2</li>
        </ul>
        <p id="demo">请点击按钮向列表插入一个项目。</p>
        <button onclick="myFunction()">试一下</button><br /><br />
        <script>
            function myFunction() {
                /*
                 * 这里要说的是insertBefore()这个函数，insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。
                 */
                var newItem = document.createElement("LI")
                var textnode = document.createTextNode("Water")
                newItem.appendChild(textnode)

                var list = document.getElementById("myLists")
                list.insertBefore(newItem, list.childNodes[0]);
            }
        </script>

        <!--========================================================================-->
        <ul id="myListe">
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <p id="demo">点击按钮来删除列表中的首个项目。</p>
        <button onclick="myFunction()">试一下</button>
        <script>
            function myFunction() {
                /*
                 * 这个例子说函数removeChild()例子
                 * 这个就为我们删除的内容例子、
                 */
                var list = document.getElementById("myListe");
                list.removeChild(list.childNodes[0]);
            }
        </script>

        <!--==================================================================-->

        <ul id="myLis">
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <p id="demo">点击按钮来替换列表中的首个项目。</p>
        <button onclick="myFunction()">试一下</button>
        <script>
            function myFunction() {
                /*
                 * 这里主要来说一个函数就是replaceChild()替代我们标签内的内容。
                 */
                var textnode = document.createTextNode("Water");
                var item = document.getElementById("myLis").childNodes[0];
                item.replaceChild(textnode, item.childNodes[0]);
            }
        </script>
    </body>

</html>