前端学习笔记之 创建节点 与 添加节点案例

最新推荐文章于 2023-08-24 22:15:24 发布
最新推荐文章于 2023-08-24 22:15:24 发布
阅读量449 收藏 1
点赞数
分类专栏： 前端 文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zglibk/article/details/106844011
版权
这篇前端学习笔记详细介绍了如何在JavaScript中动态创建li节点，并将其添加到ul中，同时展示了如何根据用户输入的内容创建节点，以及如何选择是在列表末尾追加还是在开头插入新节点。
摘要由CSDN通过智能技术生成

发布留言案例实现

一、案例分析

  1. 核心思路：点击按钮之后，就动态创建 li，添加到 ul 里面；
  2. 创建 li 的同时，把文本域里面的值通过 li.innerHTML 赋值给 li；
  3. 显示新的留言（ 后面显示：appendChild || 前面显示：insertBefore）

二、实现过程

1. 基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *
了解本专栏 订阅专栏 解锁全文 超级会员免费看
←か淡定☆ ヾ
关注
专栏目录
订阅专栏
前端学习笔记之DOM（一）
←か淡定☆ ヾ 的博客
06-19 304
DOM介绍1.DOM简介1.1什么是DOM1.2 DOM树2. 获取元素2.1如何获取页面元素2.2 根据ID获取2.3 根据标签名获取2.4 通过 HTML5 新增的方法获取2.5 获取特殊元素（body、html）2.5.1 获取body元素2.5.2 获取html元素对象3.事件基础3.1 事件概述3.2 事件三要素3.2.1 案例3.3 执行事件的步骤3.4 常见的鼠标事件3.5 分析事件三要素4. 操作元素4.1 改变元素内容4.2 常用元素的属性操作4.3 表单元素的属性操作4.4 样式属性的操
前端开发树节点PC端
05-19
前端开发树节点PC端
前端学习（855）：创建节点
歌谣的博客
04-15 237
1)document.createElement(tagName) createElement()用来创建一个元素节点，即 nodeType=1 的节点。其中，tagName 为HTML标签的名称，并将返回一个节点对象。 (2)document.createTextNode(text) createTextNode()用来创建一个文本节点，即 nodeType=3 的节点。其中，text 为文本节...
JavaScript增加节点案例
qq_36507046的博客
07-12 1768
增加节点分为两个步骤：1、创建元素节点语法：元素.creatElement('标签名')2、追加节点创建的元素节点不会显示在页面中，要想在界面看到，还得插入到某个父元素中。有两种追加给父元素的方法。（一定是追加给元素所以需要先获取父元素） 插入到父元素的最后一个子元素语法：父元素.appendChild(子元素) 插入到父元素中某个子元素的前面语法：父元素.InsertBefore(要插入的元素，在哪个元素前插入).........
【前端】JavaScript-节点操作
qq_45764950的博客
11-10 1011
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。它只返回子元素节点，其余节点不返回（重点掌握）。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。利用DOM树可以把节点划分为不同的层次关系，常见的是父子兄层级关系。得到的是一个集合，包含所有的子节点，包含文字节点和元素节点等。得到的是离元素最近的父节点，如果找不到父节点则返回null。实际开发中，节点操作主要操作的是元素节点。封装一个兼容性的函数。
js dom-2bom初识
qq_43382750的博客
08-13 192
节点操作 、什么是节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点 document 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 、节点类型 通过noteType属性可以获取节点的类型 document的节点类型---9 console.log(document.nodeType);//9 标签的节点类型---1 varbox1=docume...
JavaScript学习笔记之DOM基础操作实例小结
12-08
总结，JavaScript DOM基础操作是前端开发的基础技能，理解和熟练运用子节点、父节点以及相关属性和方法，对于创建动态、响应式的Web应用至关重要。通过不断实践和学习，你可以逐步提高在这方面的专业能力。
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4750
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
vue2笔记和案例 vue2 笔记和案例
04-17
通过"vue_basic"和"vue_test"这两个文件，你可以学习到Vue 2的基础知识和实践应用，包括如何创建组件、处理数据绑定、实现动态渲染、使用路由和状态管理等。这些案例将帮助你更好地理解和掌握Vue 2的开发技巧，为你...
【小白学前端】JS：节点操作
qq_43146801的博客
08-30 319
节点操作
前端学习笔记-JS-DOM-节点操作
qq_36434637的博客
09-16 193
节点操作 节点概述 一般的，节点至少由nodeType（节点类型）、 nodeName（节点名称）、 nodeValue（节点值）这三个基本属性。 元素节点 nodeType 为1 属性节点 nodeType 为2 文本节点 nodeType 为3 （文本节点包括文字、空格、换行等等） 在实际开发中，节点操作主要操作的是元素节点。 节点层级 1.父级节点 ...
JavaScript的节点操作 —— 增加节点
Ass12454548的博客
01-23 1448
JavaScript的节点操作 —— 增加节点
Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）
IT1995的博客
05-21 3149
这里主要是针对vis的network图进行节点动态添加 图用的是vis.js，表单使用的是element-ui 程序运行截图如下： 添加一个节点： 这里是不需要刷新页面就能添加的。 程序结构如下： 关键源码如下： FormGroup.vue <template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" cla..
前端（十四）——DOM节点操作手册：你需要了解的一切
最新发布
杜永康的博客
08-24 3700
DOM（文档对象模型）是一种用于表示和操作HTML、XML和SVG文档的编程接口。它将网页文档解析为一个由节点组成的树形结构，每个节点代表文档中的一个元素、属性、文本或其他内容。DOM是很重要的，因为它让我们能够使用JavaScript等脚本语言直接操控网页内容，实现动态、交互性强的网页效果。通过DOM，我们可以改变网页的样式和结构，响应用户的操作，并且实现数据的动态加载和更新。这样就能够让网页更加生动有趣，提升用户体验。同时，DOM的标准化也保证了开发者在不同浏览器下的兼容性，使得开发更加便捷和可靠。
前端爬坑之路——VUE动态添加DOM节点
热门推荐
weixin_46472377的博客
03-04 1万+
在实际项目当中大家一定也会遇到动态添加一行新的DOM节点，例如： 点击添加动态生成一行，我拿到时，很常规的想到 v-html 通过str +=<p>内容</p>添加，但里面有element-ui 会自动过滤掉了显示不出来（具体我已经试过），然后跳出思维，换一种方式实现 通过 v-for=“item in num” ,添加 num +=1 ，就完美的解决，自动更新新的...
Web前端学习笔记——JavaScript之事件、创建元素、节点操作
唯恋殊雨的博客
09-24 782
事件 事件：触发-响应机制 Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。 事件三要素 事件源:触发(被)事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序:事件触发后要执行的代码(函数形式) 事件的基本使用 var box = document.getElementById('box'); box.oncli...
节点操作之创建和添加节点
weixin_67110633的博客
02-02 2595
document.createElement() 方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据需要动态生成的，所有也称之为。node.appendchild（）方法将一个节点添加到指定父节点的子节点列表。node.insertBefore（）方法将一个节点添加到父节点的指定节点。2.node.insertBefore（child，指定元素），类似于css里面的before伪元素。，类似于css里面的after伪元素。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

←か淡定☆ ヾ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值