创建 DOM 元素的几种方式

已于 2022-02-22 23:34:32 修改
阅读量8.5k 收藏 6
点赞数 2
分类专栏： JS杂记 文章标签： javascript css html 前端
于 2021-06-23 02:09:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angry_rooster/article/details/118127484
版权

document.write()

document.write()是向文档写入内容，参数是一个将要被写入 HTML 文档的字符串

document.write(markup);

类似的还有一个document.wirteln()，只是最后紧跟一个换行符

如果字符串中有标签元素，会被解析并在文档中创建一个对应元素节点

在这里插入图片描述

在这里插入图片描述

但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖

<!-- 这里为了在文档加载后才调用 write() ，需要使用到 加载事件onload -->
<body>
    <h3>
最低0.47元/天 解锁文章
凶鸡
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM节点的创建
weixin_54664933的博客
06-17 1481
打开开发工具后直接新建项目，添加视图和控制器。添加好后回到视图插入写jQquery代码时需要的插件。 我们先说DOM节点的创建。创建节点以及节点属性的过程比较简单。1.创建节点（常见的：元素、属性和文本）。2.添加节点的一些属性（当然你可以选择不添加，没有要求必须填）。3.加入文档中。在这三个流程中我们回合涉及到一点方法比如：创建元素document.createElement、设置元素：setAttribute、添加文本：innerHTML、加入文档：appendChild。 我们先直接在页面上创建几个节
web前端学习（四十二）——JavaScript DOM元素（添加、移除及替换）、DOM集合（Collection）、DOM节点列表（NodeList）
★★光亭★★
02-23 9224
web前端学习（四十二）——JavaScript DOM元素（添加、移除及替换）、DOM集合（Collection）、DOM节点列表（NodeList）
js 创建dom的几种方式
最新发布
stpzhf的博客
01-05 642
【代码】js 创建dom的几种方式。
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 4900
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
JavaScript如何创建一个DOM元素
qq_54334713的博客
04-26 950
前言： HTML元素通常是由元素节点和文本节点组成 基础方法： document.createElement() 创建元素节点 document.createAttribute() 创建一个属性节点 document.createTextNode() 创建文本节点 appendChild() 向节点的子节点列表的末尾添加或者删除子节点建 运用： //创建h1标签 var h=document.createElement("H1")...
js基础知识（二十七）--DOM对象的创建、插入
weixin_47928499的博客
08-08 3147
DOM对象的创建、插入
JS DOM创建节点
ElegantHedgehog的博客
08-08 603
DOM节点操作之增删改查 document.write() 可以向文档中添加节点 但是有个致命问题，会把文档原有的节点全部清空 因此不推荐使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ wid...
JavaScript遍历DOM元素的常见方式示例
12-12
本文将详细介绍几种常见的遍历DOM元素的方法，并通过示例进行解析。 1. 使用`firstChild`和`lastChild`： `firstChild`属性返回一个节点的第一个子节点，而`lastChild`则返回最后一个子节点。然而，由于不同浏览器...
JS中获取 DOM 元素的绝对位置实例详解
12-10
下面我们将详细介绍几种获取DOM元素绝对位置的方法及其兼容性。 1. `offsetTop` 和 `offsetLeft` `HTMLElement.offsetTop` 和 `HTMLElement.offsetLeft` 属性分别用于获取元素相对于其定位容器（positioning ...
DOM元素的绝对位置
04-03
JavaScript提供了一种有效的方法来获取DOM元素在页面上的精确坐标，这在创建复杂的用户界面和动画时非常有用。 DOM元素的绝对位置指的是元素左上角相对于浏览器窗口的像素位置，包括了元素自身的边距、边框和内填充...
通过JS动态创建一个html DOM元素并显示
12-10
近日，因工作需要，需要通过点击某个元素后， 动态创建一个DOM元素并显示，因此写了一些相关的JS函数，在此记录，以作备忘： /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个元素的位置 @obj 该元素的DOM对象，或该元素的ID */ function getObjec
002_动力节点_XML_介绍解析XML的几种方式.zip_XML DOM4J_视频解析
09-21
这篇教程，"002_动力节点_XML_介绍解析XML的几种方式.zip"，通过视频形式详细讲解了XML文档的解析方法，特别提到了DOM4J这个强大的Java库。 首先，我们要理解XML的基本结构。XML文档由元素、属性、文本内容、注释等...
04——javascript Dom 动态创建元素 操作样式
幺生
11-08 3763
——采自传智播客的教学笔记(手打难免有错)
js操作DOM元素
Ivy_ZW的博客
03-20 361
DOM操作：创建元素、查找元素、添加新元素、替换、移除、复制、移动
JavaScript-操作DOM对象-创建和插入dom节点
qq_38959934的博客
08-15 895
插入节点 https://www.bilibili.com/video/BV1JJ41177di?p=23
DOM创建表格
普罗旺斯_浅笑的博客
03-12 481
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt; var table =
创建DOM新节点
iteye_5722的博客
03-03 236
一 介绍 创建新的节点先通过使用文档对象中的createElement()方法和createTextNode()方法，生成一个新元素并生成文本节点，然后通过使用appendChild()方法将创建的新节点添加到当前节点的末尾处。 appendChild()方法将新的子节点添加到当前节点的末尾。 obj.appendChild（newChild） newChild：表示新的子节点。   ...
JavaScript——DOM如何获取、添加元素
qq_45762293的博客
11-24 628
JavaScript—DOM如何获取、添加元素 DOM中有很多可以获取到页面元素的方法，这些方法都可以获取到页面元素，从而对元素进行操作，也可以添加、删除、修改元素。 页面上的每一个元素，其实就是一个节点，而DOM上每一个节点都是唯一的。 旧的获取方法 1、拿到页面所有的锚点 document.anchors； 2、拿到所有元素 document.body； 3、拿到所有的表单 documen...
js创建dom元素方法
04-27
JavaScript 创建 DOM 元素的方法有多种，以下是其中几种常见的方法： 1. 使用 document.createElement() 方法创建元素节点，例如： ``` var newDiv = document.createElement("div"); ``` 2. 使用 document.createTextNode() 方法创建文本节点，例如： ``` var text = document.createTextNode("Hello, World!"); ``` 3. 使用 innerHTML 属性向某个元素内添加 HTML 代码，例如： ``` document.getElementById("myDiv").innerHTML = "<p>Hello, World!</p>"; ``` 4. 使用 insertAdjacentHTML() 方法向某个元素添加 HTML 代码，例如： ``` document.getElementById("myDiv").insertAdjacentHTML("beforeend", "<p>Hello, World!</p>"); ``` 5. 使用字符串拼接的方式创建 HTML 代码，例如： ``` var html = "<div><p>Hello, World!</p></div>"; document.getElementById("myDiv").innerHTML = html; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值