JS创建元素的三种方式

最新推荐文章于 2024-04-25 00:00:00 发布
最新推荐文章于 2024-04-25 00:00:00 发布
阅读量1.3k 收藏
点赞数
文章标签： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40301211/article/details/88983407
版权

1.innerHTML

element.innerHTML = '标签字符串'

2.docuement.write()

 document.write('标签字符串')

3.document.createElement()

document.createElement('标签名')

三者区别

innerHTML 会覆盖原来元素里面的内容,并且会将新的元素直接渲染到页面上,但是不推荐用来创建表格(常用)

document.write() 也会直接渲染到页面上,并且在事件中执行的话,会覆盖原来页面的内容(慎用)

docuement.createElement() 只是在内存中创建出来一个元素,但是并没有添加到DOM树中(常用)

qq_40301211
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
创建 DOM 元素的几种方式
angry_rooster的博客
06-23 8513
通过write()、createElement()和innerHTML创建元素 document.write() document.write()是向文档写入内容，参数是一个包含要写入文档的文本的字符串 document.write(markup); 类似的还有一个document.wirteln()，只是最后紧跟一个换行符 如果字符串中有标签元素，会被识别为标签元素，并在文档中创建一个对应元素节点 但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖
JS 创建HTML元素的方法
夏沐的博客
01-21 1万+
元素创建的三种方式:     * 1. document.write("标签的代码及内容");     * 2. 对象.innerHTML="标签及代码";     * 3. document.createElement("标签的名字"); 1、document.write("标签的代码及内容")方式： <!DOCTYPE html> <html lang="en&q
JS学习--利用javascript创建元素的4种方法
weixin_48084293的博客
06-04 4874
文章目录先总结4种方法1. document.write()；2. element.innerHTML3. document.creatElment()4. 采用数组创建的方式遇到的问题 这个知识点学习也有几天了，今天在做轮播图效果时被坑了一下耽误了很长时间，所以从重新在总结巩固一下。 先总结4种方法 1. document.write()； var btn = document.querySelector('button'); btn.onclick = function () {
JS 添加数组元素（ 4种方法 ）
最新发布
大剑师兰特的GIS世界
04-25 5756
ush() 和 unshift() 方法会直接修改原数组。 splice() 方法同样会直接修改原数组，但它还可以用来同时删除和插入元素。 concat()方法不会改变原数组，而是返回一个新的数组。
JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式
王春燕的博客
04-26 5278
当网页被加载时，浏览器会创建页面的文档对象模型DOM（Document Object Model），在DOM中，每个东西都是节点。 DOM四大操作：查找、更新、添加、删除 通过DOM，JavaScript 可创建动态的 HTML： 能够改变页面中的所有 HTML 元素 能够改变页面中的所有 HTML 属性 能够改变页面中的所有 CSS 样式 能够对页面中的所有事件做出反应 前提：首先找到相关元素，前面一篇博客，详细的说明了，如何查找相关的元...
JavaScript 创建元素
m0_55201788的博客
01-15 2056
三种创建元素方式 document.write () element .innerHTML document.createElement () 1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘（重新加载一个新的只包含该内容的页面） 2. innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘 3. innerHTMr创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂 4. createElement ()创..
JavaScript中元素创建的三种方式
热门推荐
秦哥的博客
09-23 1万+
目录 0.码仙励志 1. document.write("标签的代码及内容"); 2. 对象.innerHTML="标签及代码"; 3. document.createElement("标签的名字"); 4.元素相关的方法 1.insertBefore( )   在某个元素之前插入一个新的元素 2.replaceChild( )   替换某个元素 3.removeChild( ) ...
JS中动态创建元素的三种方法总结(推荐)
10-21
下面小编就为大家带来一篇JS中动态创建元素的三种方法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS动态创建元素的两种方法
10-22
主要为大家详细介绍了JS动态创建元素的两种方法,字符串拼接形式，或是使用Document、Element对象自带的一些函数，需要的朋友可以参考下
javascript创建元素和删除元素实例小结
10-16
主要介绍了javascript创建元素和删除元素,结合实例形式总结分析了javascript针对页面元素的动态创建、删除及子元素操作相关实现技巧,需要的朋友可以参考下
浅析JS动态创建元素【两种方法】
10-22
下面小编就为大家带来一篇浅析JS动态创建元素【两种方法】。小编觉得挺不错的，现在分享给大家。一起跟随小编过来看看吧
JS中动态创建元素的三种方法
安静的对折的专栏
09-19 8538
1、动态创建元素一 document.write()   例如向页面中输出一个 li 标签 document.write("123"); body标签中就会插入但是这种方法几乎不用，因为这回影响页面的布局，甚至会将页面原来的内容冲刷掉，从而只显示输出内容 2、动态创建元素二 innerHTML var box = document.getElement
JavaScript创建元素的三种方式
Potry Code的博客
08-05 8810
第一种：document.write(“标签的代码及内容”)； document.write('新设置的内容<p>标签也可以生成</p>'); 该方法的缺陷：如果是在页面加载完毕后，此时通过这种方式创建元素，会将页面原来的内容冲刷掉，从而只显示输出内容。(不推荐) 第二种：对象.innerHTML=“标签代码及内容”; var box = document.getElem...
js元素创建的三种方式
m0_37850231的博客
09-12 276
1.document.write(“标签代码及内容”); <body> <input type="button" value="创建一个p" id="btn"/>原本的元素 <script src="common.js"></script> <script> document.getElementById("btn").onclick...
js创建元素的几种方式
zwj13603571674的博客
01-03 925
1.使用createElement(“标签名”) <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .red { width: 300px; heigh...
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 4836
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
原生js中的对元素的添加,删除,复制,创建等操作.
xhdjdje的博客
02-19 3510
使用原生js来对元素进行创建,删除,复制,添加等操作
JS 创建元素的三种方法
Jason的学习笔记
03-16 689
感谢原文作者：py-小白 原文链接：https://www.cnblogs.com/wanguofeng/p/10559880.html 1、动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script&gt...
javascript 动态创建标记的几种方法
watermelonbig的专栏
11-12 1820
javascript 动态创建标记的几种方法 1、传统技术document.write和innerHTML实现动态创建标记 2、DOM方法createElement、createTextNode、appendChild和insertBefore动态创建标记 3、Ajax方法实现动态创建标记
js 在元素下创建元素
06-01
可以使用 JavaScript 中的 createElement 方法来在元素下创建新元素。具体步骤如下： 1. 使用 document.getElementById 或 document.querySelector 获取父元素节点。 2. 使用 createElement 方法创建新元素节点。 3...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值