【Web APIs】JavaScript 节点操作 ⑦ ( 创建节点案例 | 网页评论功能 )

韩曙亮

821人浏览 · 2025-07-23 23:16:42

韩曙亮 · 2025-07-23 23:16:42 发布

文章目录

一、JavaScript 创建节点案例
二、完整代码示例
- 1、代码示例
- 2、执行结果

在【Web APIs】JavaScript 节点操作 ① ( DOM 方式获取标签元素的弊端 | 节点简介 | DOM 节点概述 | 节点基本属性 - 节点类型、节点名称、节点值 ) 博客中 , 介绍了传统 DOM 方式获取节点的方式及其弊端 ( 调用繁琐、逻辑性差 ) , 并对节点的基本属性 ( 节点类型、节点名称、节点值 ) 进行了简要介绍 ;

在【Web APIs】JavaScript 节点操作 ② ( DOM 节点层级 | 利用节点间的层次关系获取元素 | 遍历节点层级 | 获取父节点 / 子节点代码示例 ) 博客中 , 介绍了利用节点间的层次关系获取元素 , 通过 parentNode 获取父元素 , 通过 childNodes 获取所有类型节点 ( 包括文本节点 ) , 通过 children 获取子元素节点 , 并给出了示例代码 ;

在【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 ) 博客中介绍了第一个子节点和最后一个子节点的获取方式 ;

在【Web APIs】JavaScript 节点操作 ④ ( 节点操作案例 - 下拉菜单案例 ) 博客中 , 开发了一个节点操作的案例 , 控制下拉菜单显示 / 隐藏 ;

在【Web APIs】JavaScript 节点操作 ⑤ ( 操作兄弟节点 | 获取兄弟节点属性 | 自定义兼容函数 ) 博客中 , 介绍了利用 previousSibling、nextSibling、previousElementSibling、nextElementSibling 属性进行兄弟节点操作 ;

在【Web APIs】JavaScript 节点操作 ⑥ ( 创建和添加节点 | 创建标签节点 | 创建文本节点 | 创建文档片段 | 添加节点 | 代码示例 ) 博客中 , 介绍如何动态创建和添加节点 ; 使用 document.createElement( tagName) 方法创建标签名为 tagName 的 HTML 标签元素 ; 使用 parent.appendChild(child) 方法将元素添加到父容器末尾 , 使用 parent.insertBefore(newNode, referenceNode) 方法在参考节点前插入新节点 ;

本篇博客中 , 讲解创建并添加节点的案例 ;

一、JavaScript 创建节点案例

1、需求说明

实现如下功能 :

页面中设置一个文本域 ,

在文本域中输入文本 , 点击发布评论按钮 , 创建元素并将元素添加到页面中 ;

创建元素 : 在 ul 列表中生成 li 列表项 , 将文本内容显示到 li 列表项中 ,

添加元素 : 之后将 li 列表项添加到 ul 列表中 ;

在这里插入图片描述

2、CSS 样式说明

清除元素内外边距

所有的 HTML 页面 , 都要设置 ;

        /* 全局样式重置：清除所有元素的内外边距 */
        
        * {
            margin: 0;
            /* 外边距归零 */
            padding: 0;
            /* 内边距归零 */
        }

文本域样式

文本域 textarea 默认是行内样式 , 这里想要令该元素垂直排列 , 设置为块级元素 ;

同时设置其黑色边框 border: 1px solid black ;


        /* 文本输入区域样式 */
        
        textarea {
            display: block;
            /* 设置为块级元素 */
            width: 200px;
            /* 设置宽度为200像素 */
            height: 100px;
            /* 设置高度为100像素 */
            border: 1px solid black;
            /* 添加1px黑色实线边框 */
            outline: none;
            /* 移除聚焦时的外轮廓线 */
            resize: none;
            /* 禁止用户调整文本框大小 */
        }

按钮样式

按钮默认也是行内样式 , 将其设置为块级元素 , 垂直排列 ;

设置其高度和行高都为 30 像素 , 可以设置其中的文本垂直居中 ;

        button {
            display: block;
            /* 设置为块级元素 */
            width: 200px;
            /* 设置宽度为200像素 */
            height: 30px;
            /* 设置高度为100像素 */
            line-height: 30px;
            /* 设置行高 = 高度 文本 垂直居中 */
            margin-top: 20px;
            /* 设置顶部外边距为 20px */
        }

列表样式

下面是 ul 列表样式 , 其中的列表样 li 样式设置具体的文本 / 背景显示样式 ;

        /* 无序列表样式 */
        
        ul {
            margin-top: 50px;
            /* 设置顶部外边距为50px */
        }
        /* 列表项样式 */
        
        li {
            width: 300px;
            /* 设置宽度为300像素 */
            padding: 5px;
            /* 设置内边距为5px */
            background-color: gray;
            /* 设置浅紫色背景 */
            color: black;
            /* 设置文字颜色为红色 */
            font-size: 14px;
            /* 设置字体大小为14像素 */
            margin: 15px 0;
            /* 设置上下外边距15px，左右0 */
        }

3、JavaScript 脚本 - 创建并添加元素

获取 DOM 元素

获取页面中的涉及到的元素 , 文本域、按钮、列表元素 ;

        // 1. 获取页面元素
        var btn = document.querySelector('button'); // 获取页面中的按钮元素
        var text = document.querySelector('textarea'); // 获取文本输入框元素
        var ul = document.querySelector('ul'); // 获取无序列表元素

为按钮设置点击事件

为 button 按钮设置点击事件 , 如果文本域内容为空 , 则弹出警告提示对话框 ;

        // 2. 为按钮注册点击事件处理函数
        btn.onclick = function() {
            // 检查文本输入框是否为空
            if (text.value == '') {
                alert('您没有输入内容'); // 弹出警告提示
                return false; // 阻止后续操作执行
            } 
		}

创建元素

通过调用 document.createElement(‘li’) 函数 , 可以创建 li 元素标签 , 为其设置 innerHTML 即可设置其显示的文本内容 ;

                // (1) 创建新的列表项元素
                var li = document.createElement('li'); // 创建一个<li>元素

                // 将文本输入框的值赋给新列表项的内容
                // 注意：需要先创建li元素才能设置其内容
                li.innerHTML = text.value; // 设置li的HTML内容为输入文本

添加元素

将创建的 li 元素添加到 ul 列表容器中 ,

调用 ul.appendChild(li) 方法 , 可以将 li 元素添加到列表末尾 ;
调用 ul.insertBefore(li, ul.children[0]) 方法 , 可以将 li 元素添加到列表开头 ;

                // (2) 将新元素添加到列表中
                // 方法1：添加到列表末尾
                // ul.appendChild(li);  

                // 方法2：添加到列表开头（当前选择的方法）
                // 参数说明：ul.insertBefore(新元素, 参考元素)
                // ul.children[0] 获取当前列表的第一个子元素
                ul.insertBefore(li, ul.children[0]);

二、完整代码示例

1、代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建并添加节点案例</title>
    <style>
        /* 全局样式重置：清除所有元素的内外边距 */
        
        * {
            margin: 0;
            /* 外边距归零 */
            padding: 0;
            /* 内边距归零 */
        }
        /* 页面主体样式 */
        
        body {
            padding: 100px;
            /* 设置页面内边距为100px */
        }
        /* 文本输入区域样式 */
        
        textarea {
            display: block;
            /* 设置为块级元素 */
            width: 200px;
            /* 设置宽度为200像素 */
            height: 100px;
            /* 设置高度为100像素 */
            border: 1px solid black;
            /* 添加1px黑色实线边框 */
            outline: none;
            /* 移除聚焦时的外轮廓线 */
            resize: none;
            /* 禁止用户调整文本框大小 */
        }
        
        button {
            display: block;
            /* 设置为块级元素 */
            width: 200px;
            /* 设置宽度为200像素 */
            height: 30px;
            /* 设置高度为100像素 */
            line-height: 30px;
            /* 设置行高 = 高度 文本 垂直居中 */
            margin-top: 20px;
            /* 设置顶部外边距为 20px */
        }
        /* 无序列表样式 */
        
        ul {
            margin-top: 50px;
            /* 设置顶部外边距为50px */
        }
        /* 列表项样式 */
        
        li {
            width: 300px;
            /* 设置宽度为300像素 */
            padding: 5px;
            /* 设置内边距为5px */
            background-color: gray;
            /* 设置浅紫色背景 */
            color: black;
            /* 设置文字颜色为红色 */
            font-size: 14px;
            /* 设置字体大小为14像素 */
            margin: 15px 0;
            /* 设置上下外边距15px，左右0 */
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布评论</button>
    <ul>

    </ul>
    <script>
        // 1. 获取页面元素
        var btn = document.querySelector('button'); // 获取页面中的按钮元素
        var text = document.querySelector('textarea'); // 获取文本输入框元素
        var ul = document.querySelector('ul'); // 获取无序列表元素

        // 2. 为按钮注册点击事件处理函数
        btn.onclick = function() {
            // 检查文本输入框是否为空
            if (text.value == '') {
                alert('您没有输入内容'); // 弹出警告提示
                return false; // 阻止后续操作执行
            } else {
                // (1) 创建新的列表项元素
                var li = document.createElement('li'); // 创建一个<li>元素

                // 将文本输入框的值赋给新列表项的内容
                // 注意：需要先创建li元素才能设置其内容
                li.innerHTML = text.value; // 设置li的HTML内容为输入文本

                // (2) 将新元素添加到列表中
                // 方法1：添加到列表末尾
                // ul.appendChild(li);  

                // 方法2：添加到列表开头（当前选择的方法）
                // 参数说明：ul.insertBefore(新元素, 参考元素)
                // ul.children[0] 获取当前列表的第一个子元素
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>

</html>

2、执行结果

执行后 , 显示的初始效果如下 :
在这里插入图片描述

如果直接点击 " 发布评论 " 按钮 , 会弹出错误提示对话框 ;

在这里插入图片描述

在文本框输入文本 , 点击发布评论按钮 , 即可将该内容显示到布局中 ;
在这里插入图片描述

下面是发布的多个评论内容 ;
在这里插入图片描述

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

SeedVR2终极指南：如何用单步扩散模型实现专业级视频修复

还在为老旧视频的模糊画质而烦恼吗？面对抖动严重的监控录像或褪色的家庭影像，你是否曾希望有一种简单高效的修复方案？SeedVR2正是为解决这些痛点而生的一站式视频修复工具。作为字节跳动推出的先进视频修复模型，它能够在单步推理中实现专业级的视频质量提升，彻底改变了传统视频修复的工作流程。## 核心价值：为什么选择SeedVR2进行视频修复？**传统视频修复的三大瓶颈**：1. **计算成本高

AI Agent技术社区

深度解析Amlogic S9xxx电视盒子Armbian系统：从闲置设备到Linux服务器的终极实战指南

你是否拥有一台闲置的Amlogic S9xxx系列电视盒子？想让它摆脱单一的视频播放功能，变身为功能强大的Linux服务器、开发平台或家庭媒体中心？本指南将为你详细解析如何通过Armbian系统实现这一转变，让你的电视盒子重获新生，成为高性能的Linux设备。Armbian系统基于Debian/Ubuntu构建，专为ARM芯片优化，提供了完整的Linux生态支持。## 🎯 核心价值与独特优势

AI Agent技术社区

CANN/runtime Event管理API

本章节描述 CANN Runtime 的 Event 管理接口，用于事件的创建、记录、同步、计时及 IPC 跨进程共享。- [`aclError aclrtCreateEvent(aclrtEvent *event)`](#aclrtCreateEvent)：创建Event，创建出来的Event可用于统计两个Event之间的耗时、多Stream之间的任务同步等场景。- [`aclError