当前位置:首页 > 技术分析 > 正文内容

在 JAVASCRIPT 中创建 HTML 元素...

ruisui884周前 (05-21)技术分析11

你能在 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 中做很多事情,这些只是它的基础。


谢谢你

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/4198.html

标签: html ::before
分享给朋友:

“在 JAVASCRIPT 中创建 HTML 元素...” 的相关文章

理解virt、res、shr之间的关系(linux系统篇)

前言想必在linux上写过程序的同学都有分析进程占用多少内存的经历,或者被问到这样的问题——你的程序在运行时占用了多少内存(物理内存)?通常我们可以通过top命令查看进程占用了多少内存。这里我们可以看到VIRT、RES和SHR三个重要的指标,他们分别代表什么意思呢?这是本文需要跟大家一起探讨的问题。...

壹啦罐罐 Android 手机里的 Xposed 都装了啥

这是少数派推出的系列专题,叫做「我的手机里都装了啥」。这个系列将邀请到不同的玩家,从他们各自的角度介绍手机中最爱的或是日常使用最频繁的 App。文章将以「每周一篇」的频率更新,内容范围会包括 iOS、Android 在内的各种平台和 App。本期继续歪楼,由少数派撰稿作者@壹啦罐罐介绍他正在使用的...

Excel中的FILTER函数详细介绍及使用示例

在Excel中处理大量数据时,经常需要根据特定条件筛选出符合条件的数据行或列。这正是Excel的FILTER函数发挥作用的地方。FILTER函数是Excel中一个非常强大的工具,它可以基于一个或多个条件动态地过滤数据,使数据分析和报告制作变得更加高效和准确。本文将详细介绍FILTER函数的用法,并提...

Vue页面传参详解

一、两种方式方法1:name跳转页面this.$router.push({name:'anotherPage',params:{id:1}})另一页面接收参数方式:this.$route.params.id示例:控制台展示:方法2:path跳转页面this.$router.push(...

关于Vue页面跳转传参,参数不同, 但页面只获取参数一次的问题

#头条创作挑战赛#1.问题描述问题描述: element 展示表格(页面A),点击表格的每一行的查看详情按钮,可以携带此行的信息参数跳转到另一个页面(页面B),但是从A页面到B页面,只有第一次跳转的时候B页面可以获取到A页面的参数,返回再次A->B ,B页面无法获取到参数。2.解决办法:方法一...

vue2中路由的使用步骤,你学会了吗?

今天我们来整理下关于vue2中路由的使用步骤:1. 导入 vue 文件和Vue-router文件(注意:vue-router是依赖vue运行的,所以一定在vue后引入vue-router)2. 定义路由组件模板3. 创建路由实例并定义路由规则4. 将路由实例挂载给Vue实例5. 在结构区域定义控制路...