在 JAVASCRIPT 中创建 HTML 元素...

yumo66621小时前技术文章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 中做很多事情,这些只是它的基础。


谢谢你

相关文章

CSS基础(CSS基础知识点总结)

CSS介绍CSS(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言CSS的作用美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式控制页面布局, 比如: 设置浮...

CSS选择器瘦身记::is()和:where()如何让你的代码少掉一半?

当CSS选择器开始"减肥"你是否也曾面对这样的CSS代码发愁?header p:hover, main p:hover, footer p:hover { color: red;...

css篇一 什么是css、css的作用以及css的基本格式

一、什么是csscss的英文全称是:Cascading Style Sheets,翻译过来叫:层叠样式表。这其中有两个关键字,一个是层叠一个是样式。样式指的是给html调整样式层叠指的是可以叠加调整,...

你不知道的css小技巧(你不知道的css小技巧在哪)

提示:点击上方"蓝色字体"↑ 可订阅!关于我们 51RGB官方微信CSS中的级联(cascade)在同一时间可谓是幸福的,也可以说是痛苦不堪的。通常能工作得非常好,但有问题的时候,也让人们都很激动,甚...

css入门(CSS入门教程)

文章目录CSS入门一、CSS概述1、概述2、CSS的作用3、初体验4、CSS基础语法4、HTML引入CSS二、选择器 1、基本选择器2、扩展选择器3、超链接选择器三、样式权重问题1、权重计算规则2、权...

HTML+CSS基础训练之实现一个“真实”的网页

一、任务介绍:高保真的完成下图布局:二、分析布局首先要分析一下各个模块的布局我们依旧使用的盒子模型。首先先分为两个大盒子(红色边框)header 盒子和 content 盒子。其中content中相对...