JavaScipt中的appendChild()方法

最新推荐文章于 2021-05-31 01:43:33 发布

deiku_izuku

最新推荐文章于 2021-05-31 01:43:33 发布

阅读量1.3k

点赞数

appendChild()方法是向节点添加最后一个子节点。也可以使用此方法从一个元素向另一个元素移动元素。可以用在列表的添加操作中。

我主要以ul li列表举例：

这片代码是用于向列表中添加项的操作，主要的步骤是：

1，用var node = createElement("li")创建相应节点

2，获得要输入的信息内容text

3，利用var add = node.createTextNode(text)来填充节点的内容

4，利用ul.appendChild(node)来添加到相应的列表中，其中ul利用id跟document的getElementById()方法来赋值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul id="mylist">
            <li>牛奶</li>
            <li>橡胶</li>
            <li>花生</li>
        </ul>
        <input type="text" id="listname" name="listname"/>
        <input type="button" value="添加列表项" οnclick="mylist();"/>
        
         <script type="text/javascript">
            function mylist(){        
                var node=document.createElement("li"); //创建一个li节点
                var testnode=document.getElementById("listname").value;//拿到input输入框的值
                var asd=document.createTextNode(testnode)//定义创建文本节点
                node.appendChild(asd); //把文本节点追加到li节点
                document.getElementById("mylist").appendChild(node);//把li节点添加到ul中
            }
            </script>  
    </body>
</html>

deiku_izuku

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScipt中的appendChild()方法

appendChild()方法是向节点添加最后一个子节点。也可以使用此方法从一个元素向另一个元素移动元素。可以用在列表的添加操作中。我主要以ul li列表举例：这片代码是用于向列表中添加项的操作，主要的步骤是：1，用var node = createElement("li")创建相应节点2，获得要输入的信息内容text3，利用var add = node.createTextNode(text)来...
复制链接

扫一扫