使用JS添加元素

最新推荐文章于 2024-07-18 21:13:18 发布

Christina_cyw

最新推荐文章于 2024-07-18 21:13:18 发布

阅读量904

点赞数

分类专栏： # JS

by Chris

本文链接：https://blog.csdn.net/Christina_cyw/article/details/114122102

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js中DOM操作</title>
    <script>
        function addElement() {
            //创建li标签
            var li = document.createElement("li");
            //往li标签中添加文本节点
            var liText = document.createTextNode("哈密瓜");
            li.appendChild(liText);
            //往指定的ul中添加li标签
            document.getElementById("myFruits").appendChild(li);
        }
    </script>
</head>
<body>
    <ul id="myFruits">
        <li>香蕉</li>
        <li>苹果</li>
        <li>橘子</li>
    </ul>
    <input type="button" value="动态添加元素节点" onclick="addElement()" />
</body>
</html>