在 JAVASCRIPT 中创建 HTML 元素...
xsobi 2024-12-27 17:27 1 浏览
你能在 JavaScript 中创建一个 HTML 元素吗？ 答案是肯定的，你可以在 JavaScript 中创建一个元素让我们看看如何？
如果你想在 JavaScript 中创建一个 div 元素——
要在 JavaScript 中创建新元素，我们使用 document.createElement('div')，而不是 div，您可以分配任何 html 标签，例如 p、h1、h2、h3 等，如果您分配 p 标签，它将创建一个 p 标签。
现在，如果你想给它上一堂课，你可以做到——
为了给我们的新 div 一个类，我们使用 variablename.className = ‘class_name’ ，如上所示。
现在你也可以给它 id —
为了给 newdiv 一个 id，我们的代码是 variablename.id = ‘id_name’;
现在让我们看看我们的输出
现在，从上面的代码中，我创建了一个带有类容器和 id newElement 的 div 元素。
还有另一种方法可以在标签上设置 class 、 id 、 title 、 name ，让我们来看看。
在这里，我定义了 setAttribute() 并在括号内首先定义了标题，然后定义了标题的名称。 除了标题，您可以指定类、id 或任何名称
现在我们来看看我们的输出
您可以清楚地看到，在 div 标签内，我们的代码添加了标题，即“新 div”。
现在如果你想在 div 标签内添加内容怎么办？ 例如，在我的 div 元素中，我想添加 Hello medium reader！ 我怎样才能做到这一点？ 下面来看看吧。
在上面的代码中，我使用 document.createTextNode() 将我的文本分配给变量内容，因此 TextNode 用于为我们的元素提供文本。
所以，我们已经成功地向我们的 div 元素添加了一个文本。
现在，最重要的是，如果您想将内容插入现有的 html 代码以便在浏览器中看到它，您可以通过 insertBefore(newNode, referenceNode) 来完成它的作用是在参考节点之前插入您的节点。
所以在这里我从上面的 html 代码中创建了一个带有类容器和 h1 标签的 div 元素。
现在，我定义了一个名为 maindiv 的变量，并将其分配给具有类容器的 div 元素，并定义了一个变量 h1 并为其分配了 h1 标记。
现在，为了插入我们的节点，我使用了 inserbefore(newNode, referenceNode) ，其中 newNode 是必须插入的节点，即我们的 newdiv ，参考节点是要在其之前插入 newNode 的节点，即我们的 h1 标记。
所以从上面的输出你可以看到我们已经成功地在浏览器中显示了我们的 div 内容。
JavaScript 是一种非常有效的语言，你可以在 JavaScritp 中做很多事情，这些只是它的基础。
谢谢你
相关推荐
- 一文揭秘领域驱动设计(DDD):领域和子域
-
★★★建议星标我们★★★2020年Java原创面试题库连载中...
- DDD领域驱动设计最全详解(图文全面总结)
-
DDD领域驱动设计是现在非常火热的设计架构，而且大厂面试也经常考察，下面我就全面来详解DDD领域驱动设计@mikechen本篇已收于mikechen原创超30万字《...
- 领域驱动设计(Domain-Driven Design)的关键概念
-
领域驱动设计（Domain-DrivenDesign,DDD）是一种软件开发方法，旨在通过深刻理解业务领域来构建复杂的系统。在DDD中，开发者与领域专家密切合作，共同定义业务逻辑，并通过模型表达领...
- 终于有人把安卓程序员必学知识点全整理出来了，有如醍醐灌顶
-
阅读前请点击右上角“关注”，每天免费获取Android知识解析及面试解答。Android架构解析，只做职场干货，完全免费分享！Java相关无论什么级别的Android从业者，Java作为Android...
- [Android开发]使用观察者的正确姿势
-
前言首先先问一个问题，你在做Android开发的时候有没有被传值整的蒙圈?例如Fragment之间的传值，Activity之间的传值(ActivityForResult比较常用)，Fragment与A...
- Android音频开发:如何采集一帧音频
-
AndroidSDK提供了两套音频采集的API，分别是：MediaRecorder和AudioRecord，前者是一个更加上层一点的API，它可以直接把手机麦克风录入的音频数据进行编码压缩（如...
- 安卓手机怎么录屏?这三种方法你还不会用么?
-
手机录屏指的是使用手机的录屏功能，将屏幕上的内容进行录制，保存为视频文件，以供后续观看或分享。使用手机录屏功能，可以方便地将手机屏幕上的任何内容进行录制，无论是游戏操作、软件教程、视频播放等，只需要点...
- 网易视频云技术分享:Android 消息机制学习
-
Android消息机制大家都不陌生，想必大家也都看过Handler、Looper的源码（看过可以直接看末尾重点，一款监控APP卡顿情况的控件），下面，网易视频云技术专家就整合一下这方面的资料，加深对这...
- 2021年四大流行Android手机自动化测试工具，全在这里了
-
Android自动化测试的工具非常多，但是目前主流使用的就那几个，我会详细说明他们各自的情况，你可以根据自己的需要决定使用哪款工具。...
- 好程序员Android培训 122天炼成技术达人稳赚高薪
-
好程序员从课程研发到开班至今，历经一年的时间，专注Android和iOS开发高端人才培养，目前已经毕业的三期学员，从平均薪资的11000到三期的16000，薪资记录在行业内遥遥领先。面对如此“诱人”的...
- 娃哈哈基课堂第3课。安卓手机的盲人模式深度讲解
-
上一节课我们说了苹果手机的盲人模式如何设置？今天我们通过长文的方式来讲解安卓手机的盲人设置是如何设置的，所有的安卓手机盲人模式都是通用的，但是有一些手机因为优化系统的问题无法通用，或者有些手机直接把安...
- android培训学习的大纲 android软件开发培训
-
第一阶段android基础:1.基础javaJava概述，进制，数据类型，常量变量，运算符，表达式关系运算符，逻辑运算符，if语句，switch语句while循环，do...while循环，for循环...
- Android Jetpack从入门到精通(深度好文，值得收藏)
-
阅读前请点击右上角“关注”，每天免费获取Android知识解析及面试解答。Android架构解析，只做职场干货，完全免费分享！前言即学即用AndroidJetpack系列Blog的目的是通过学习An...
- 小技巧:安卓苹果都有!这份玩机的教程，我愿称为最强
-
从提起适老化这个概念到现在，能真正感受到的，可能只是App上的一个按钮。...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- element style (30)
- dedecms模版 (53)
- vs打不开 (29)
- nmap (30)
- c 视频教程下载 (33)
- listview排序 (33)
- firebug 使用 (31)
- transactionmanager (30)
- characterencodingfilter (33)
- getmonth (34)
- commandtimeout (30)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)
- android studio 3 0 (34)
- android开发视频 (30)
- android应用开发 (31)
- html转js (35)