JavaScript DOM三种创建元素的方式

最新推荐文章于 2022-10-06 15:11:43 发布
最新推荐文章于 2022-10-06 15:11:43 发布
阅读量934 收藏 3
点赞数 2
分类专栏： JavaScript 前端基础 文章标签： 1024程序员节 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jack_lzx/article/details/109263287
版权

三种创建元素的方式：

  1. document.write()
  2. element.innerHTML
  3. document.createElement()

1. document.write()

实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>btn</button>
    <p>段落</p>
    <div class="inner">inner</div>
    <div class="create">create</div>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function() {
            document.write('<div>123</div>');
        }
    </script>
</body>

</html>

初始页面：
在这里插入图片描述

实现效果：
点击“btn”按钮之后：
在这里插入图片描述
显然，使用document.write()创建元素，如果页面文档流加载完毕，再调用事件会导致页面重绘

2. element.innerHTML

(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>
</head>

<body>
    <button>btn</button>
    <p>段落</p>
    <div class="inner">inner</div>
    <div class="create">create</div>
    <script>
        var inner = document.querySelector('.inner');
        inner.innerHTML += ' <a href="#">我是后来加的链接，字符串拼接方式</a>';
    </script>
</body>

</html>

实现效果：
在这里插入图片描述

(2) 添加数组元素方式：

实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>btn</button>
    <p>段落</p>
    <div class="inner">inner</div>
    <div class="create">create</div>
    <script>
        var inner = document.querySelector('.inner');
        // 创建空数组
        var arr = [];
        // 将需要添加的元素，添加到数组中
        arr.push('<a href="#"> 我是后来加的链接，数组方式</a>');
        // 将数组转化为字符串，再给到inner节点
        inner.innerHTML = arr.join('');
    </script>
</body>

</html>

实现效果：
在这里插入图片描述

3. document.createElement()

实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>btn</button>
    <p>段落</p>
    <div class="inner">inner</div>
    <div class="create">create</div>
    <script>
        var create = document.querySelector('.create');
        var a = document.createElement('a');
        create.appendChild(a);
    </script>
</body>

</html>

实现效果：
在这里插入图片描述

总结：

  1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。
  2. innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。创建多个元素，结构稍微复杂。可以用字符串拼接方式、数组方式添加。
  3. createElement()创建多个元素，结构更清晰。
火星飞鸟
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
创建 DOM 元素的几种方式
angry_rooster的博客
06-23 8572
通过write()、createElement()和innerHTML创建元素 document.write() document.write()是向文档写入内容，参数是一个包含要写入文档的文本的字符串 document.write(markup); 类似的还有一个document.wirteln()，只是最后紧跟一个换行符 如果字符串中有标签元素，会被识别为标签元素，并在文档中创建一个对应元素节点 但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖
js之DOM事件
m0_61547956的博客
04-22 3331
元素创建事件的两种方式 传统方式 on开头的事件，事件的唯一性，同一个元素同一个事件只能设置一个处理函数，后面的覆盖前面的，下列代码只弹出2。 var btns = document.querySelectorAll('button'); btns[0].onclick = function() { alert(1); } btns[0].onclick = function() { alert
js基础知识（二十七）--DOM对象的创建、插入
weixin_47928499的博客
08-08 3147
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")...
Javascript Dom元素获取和添加详解
10-16
在JavaScript中，DOM（Document Object Model）是一种标准，用于表示HTML和XML文档的结构，并提供了对这些文档进行编程访问的方法。DOM元素的获取和添加是前端开发中的基础操作，对于创建交互式网页至关重要。 1. *...
JavaScript遍历DOM元素的常见方式示例
12-12
在JavaScript中，遍历DOM（文档对象模型）元素是网页动态操作的核心技能之一。DOM是HTML和XML文档的编程接口，允许我们通过脚本访问和修改文档内容、结构和样式。本文将详细介绍几种常见的遍历DOM元素的方法，并通过...
JavaScript DOM操作：创建与操控网页元素的艺术
最新发布
07-02
JavaScript 是一种强大的语言，它允许开发者与网页上的 DOM（文档对象模型）交互。通过JavaScript，我们可以创建、修改、删除和操作网页元素，从而实现动态的网页效果。本文将详细介绍如何使用 JavaScript 来创建和...
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
javascript实现dom元素可拖动
10-22
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本...可以对其中的内容进行修改和删除，同时也可以创建新的元素。
通过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
jsDOM元素创建：
痕迹
04-23 1264
DOM元素创建： 1，var oE = document.createElement(); 在元素对象中创建一个元素节点，要与appendChild() 或 insertBefore()方法联合使用。 其中，appendChild() 方法在节点的子节点列表末添加新的子节点。       insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 2，var att =
动态创建Dom元素，并设置属性和类----JS&JQ
WRian_Ban的小晴天
04-09 7428
直接上的代码HTML代码<div class="pc-container"> </div>JS代码var container = $('.pc-container'); $('<img>').attr({ src:'images/star.png' }).css({ top:'50px', lef
原生js中如何添加dom元素
热门推荐
zl13015214442的博客
05-22 3万+
1. appendChild() 概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。 使用方式：fatherdom.appendChild( insertdom )。 兼容性：所有浏览器都支持此方法。 2. insertBefore() 概念：把要插入的节点添加到指定父级里面的指定节点之前。 使用方式：fatherdom.insertBefore( insertdom，chose...
JS中DOM操作（一）
jhkkk的博客
10-08 1638
  目录  DOM 简单介绍 1.点击按钮显示图片 2.点击按钮修改p标签内容 3.点击按钮修改a标签的地址和热点文字 4.点击按钮设置多个p标签的文字内容 5.点击按钮修改图片的alt和title属性 6.排他功能 7.点击按钮修改性别和兴趣 8、点击按钮设置div的宽和高和背景颜色 9.点击按钮设置div隐藏和显示 10.点击按钮设置div的样式 11.改变页面整体颜...
在js中使用createElement创建HTML对象和元素
weixin_30432007的博客
04-01 268
1.创建链接 <script language="javascript">varo = document.body;//创建链接functioncreateA(url,text){vara = document.createElement("a");a.href = url;a.innerHTML = text;a.style.color ="...
动态创建DOM元素的三种方式
阿甘正传
09-16 9862
动态创建DOM元素的三种方式 document.write(); 不常用，因为容易覆盖原来的页面。 innerHTML = (); 用的比较多。绑定属性和内容比较方便。(节点套节点) document.createElement(); 用得也比较多，指定数量的时候一般用它。 1、方式一： document.write(); 这种方式的好处是：比较随意，想创建就创建，可以直接在wr...
js操作DOM元素
Ivy_ZW的博客
03-20 361
DOM操作：创建元素、查找元素、添加新元素、替换、移除、复制、移动
JavaScript DOM编程艺术：创建与操作节点
"《JavaScript DOM 编程艺术》是一本详细介绍JavaScript和DOM开发的书籍，由Web标准倡导者撰写，适合学习JavaScript和DOM编程的读者。书中不仅涵盖了JavaScript和DOM的基础知识，还通过实例展示了专业级别的网页开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

火星飞鸟

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

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

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

打赏作者

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

抵扣说明：

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

余额充值