JavaScript创建页面节点

最新推荐文章于 2024-05-28 00:30:00 发布

weixin_46370867

最新推荐文章于 2024-05-28 00:30:00 发布

阅读量314

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46370867/article/details/110127760

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

如果你看到前面的阴影，别怕，那是因为你背后有阳光

下面是对JavaScript中创建页面节点的整理，希望可以帮助到有需要的小伙伴

创建页面节点

在这里插入图片描述

1、创建元素节点

Document对象提供了createElement()方法创建节点

语法格式：

var element = document.createElement(tagName);

tagName是参数，表示创建元素的元素名称。
element是放回值，表示创建的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建元素节点</title>
</head>
<body>
    <script>
        // 1. 创建<button></button>元素
        var btn = document.createElement('button');
        // 2. 获取<body>元素
        var body = document.body;
        // 3. 向<body>元素添加子节点
        body.appendChild(btn);
    </script>
</body>
</html>

在这里插入图片描述

2、创建文本节点

Document对象提供了createTextNode()方法创建文本节点

语法格式：

var textNode = document.createTextNode(date);

date是参数，包含了放在文本节点中的内容，是一个字符串。
textNode是返回值，表示创建文本的节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建文本节点</title>
</head>
<body>
    <script>
        // 1. 创建<button>文本</button>元素
        var btn = document.createElement('button');

        // 2. 创建文本节点
        var textNode = document.createTextNode('按钮');

        // 3. 向<button>元素添加子节点
        btn.appendChild(textNode);

        // 4. 获取<body>元素
        var body = document.body;
        // 5. 向<body>元素添加子节点
        body.appendChild(btn);
    </script>
</body>
</html>

在这里插入图片描述

3、创建属性节点

Document对象提供了createAtrribute()方法创建属性节点

语法格式：

var arributeNode = document.createAttribute(name);

name是参数，属性节点的属性名称。
attributeNode是返回值，表示创建二点属性节点。

注意：

创建属性节点只具有属性名称，没有属性值。想要设置属性值需要通过nodeValue属性完成。
由于属性节点不是元素节点的子节点，不能使用添加子节点方式操作属性节点。想要添加属性节点需要通过setAttributeNode()方法完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建属性节点</title>
</head>
<body>
    <script>
        // 1. 创建<button>文本</button>元素
        var btn = document.createElement('button');

        // 2. 创建文本节点
        var textNode = document.createTextNode('按钮');

        // 3. 向<button>元素添加子节点
        btn.appendChild(textNode);

        // 4. 创建属性节点
        var attrNode = document.createAttribute('id');
        // 5. 为属性节点设置值
        attrNode.nodeValue = 'btn';

        // 6. 向<button>元素设置属性节点
        btn.setAttributeNode(attrNode);

        // 7. 获取<body>元素
        var body = document.body;

        // 8. 向<body>元素添加子节点
        body.appendChild(btn);

    </script>
</body>
</html>

在这里插入图片描述

weixin_46370867

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript创建页面节点

如果你看到前面的阴影，别怕，那是因为你背后有阳光下面是对JavaScript中创建页面节点的整理，希望可以帮助到有需要的小伙伴创建页面节点1、创建元素节点Document对象提供了createElement()方法创建节点语法格式：var element = document.createElement(tagName);tagName是参数，表示创建元素的元素名称。element是放回值，表示创建的元素。<!DOCTYPE html><html lang="e
复制链接

扫一扫