JavaScript: 创建节点

最新推荐文章于 2024-11-09 09:45:11 发布

原创最新推荐文章于 2024-11-09 09:45:11 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

Web 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用JavaScript DOM API中的createElement, appendChild及setAttribute方法来创建并添加带有特定属性的新元素节点。通过示例代码展示了创建一个输入框元素，并设置其类型和初始值的过程。

首先，先了解一下用于创建节点的JavaScript DOM 的方法：

createElement(element): 为给定的标签创建新的元素节点element，并返回新建节点的引用；

appendChild(node): 添加node元素节点到最后；

setAttribute(attributeName, attributeValue): 设置属性；

创建新元素节点：

var newElement = document.createElement("input");

添加新创建的元素节点：

document.body.appendChild(newElement);

为新创建的元素节点添加属性：

newElement.setAttribute("type","text");
newElement.setAttribute("value", "new element");

测试页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function appendElement()
            {
                var newElement = document.createElement("input");
                document.body.appendChild(newElement);
                newElement.setAttribute("type", "text");
                newElement.setAttribute("value", "new element");
            }
        </script>
    </head>
    <body>
        <input type ="button" value="create element" onclick="appendElement()">
        <br>
    </body>
</html>