DOM的createElement的坑

最新推荐文章于 2025-05-23 10:16:34 发布
原创 最新推荐文章于 2025-05-23 10:16:34 发布 · 2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
</body>
<script>

    var div = document.getElementsByTagName("div");

    //创建一个子节点
    var child = document.createElement("div");
    child.innerHTML = "newDiv";

    //替换子节点
    div[0].appendChild(child);//添加子节点

    div[0].replaceChild(child,document.getElementById('p1'));

</script>

出现的效果是：


刚开始看到这代码的时候，还以为会出现两个newDiv，代码都运行了，为啥只出现一个，后来，才发现，

 createElement()只创建了一个 应该所有的操作都是创建在一个newDIv上的。


后来，再替换子节点之后，又创建了一个节点，效果就是这样的啦；


createElement方法，
Jenom的博客
07-21 871
在JavaScript中， createElement 方法，这是JavaScript中DOM操作的一部分，用于创建一个新的HTML元素。// 创建一个新的div元素。// 将新元素添加到父元素的子节点列表中。// 设置元素的文本内容。这个示例展示了如何从头开始创建一个新的元素，设置它的属性和样式，添加文本内容，然后将其添加到DOM中。// 创建一个新的div元素。
uni-socket.io 真机报错TypeError: Cannot read property ‘createElement‘ of undefined的解决办法
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
04-21 552
遇到在 uniapp 真机运行时报报错，基本可以断定是 socket.io 默认协议导致的。别小看这一行，它能救你半天的 debug 时间。
DOM创建元素节点.获取节点
weixin_66171880的博客
02-02 2071
1.每点击一下去创建一个节点元素：案例如下 <div id="wrap"></div> <script> let oWrap = document.querySelector("#wrap"); // 每在页面上点1下，都在wrap内生成一个 div，每个div的背景色都是随机的 // wrap里每个div节点，都能绑定1个点击事件，点击时，可以打印自身 document.documentElem..
简化document.createElement("div")动态生成层方法
weixin_30535843的博客
09-07 888
我们在WEB开发时，很多时候往往需要我们 JavaScript 来动态建立 html 元素，动态的设置相关的属性。比方说我们想要建立一個 div 层，则可以使用以下代码实现。 一.直接建立function Button1_onclick() //直接采用代码建立一个DIV{ var newElement = document.createElement('div'); ...
html dom createelement,DOM元素操作兼容写法整理，原生js的createElement,createTextNode等功能...
weixin_39882948的博客
06-16 495
在我们通过js对dom元素进行一些操作时，就要用到DHTML所提供的操作方法；而这些操作方法在各个浏览器中的表现不是那么一致，所以就需要用到兼容写法来让我们的代码在IE，FireFox,Chrome,Safari等浏览器中都能正常运行。我总结一些dom操作的兼容写法帮助大家更好的来解决烦人的兼容性问题。一、Js创建元素1，创建dom元素varele=docment.createElement("...
js之DOM操作（创建元素节点createElement）
web前端菜鸟工程师
09-21 6184
创建元素节点createElement createElement()方法可创建元素节点。此方法可返回一个 Element 对象。 语法： document.createElement(tagName) 参数: tagName：字符串值，这个字符串用来指明创建元素的类型。 注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
15JavaScript DOM 操作全攻略！5 大核心技巧 + 避坑指南，小白秒变实战高手！
前端基地
05-23 814
还在为 JavaScript操作DOM头疼？本文深度解析document.write、innerHTML等5大核心方法，从创建节点到元素交互，搭配实战代码与避坑技巧，告别语法盲区！无论新手入门还是查漏补缺，都能快速掌握 DOM 操作精髓，轻松实现页面动态效果！
面试官：谈谈你对Shadow DOM的理解
wujiayu31415的博客
08-20 1560
通过Shadow DOM，开发者可以创建具有封装性的组件，这些组件的内部实现细节被隐藏起来，只暴露必要的接口与外部交互。通过封装组件的HTML结构、样式和行为，Shadow DOM实现了样式和逻辑的隔离，提高了代码的可维护性和可重用性。：Shadow DOM与常规DOM的边界，Shadow DOM内部的元素和样式不会影响到外部DOM，反之亦然。：利用Shadow DOM的封装性，可以创建独立的UI组件，提高组件的可重用性和可维护性。：Shadow DOM提供的核心特性，确保了组件的独立性和可重用性。
网络攻防中黑客常用技术跨站脚本技术：DOM XSS高发场景透视及修复技巧、取值写入页面或动态执行、使用HTML5 postMessage进行跨域通讯、使用存在缺陷的第三方库或通用组件
代码讲故事
03-08 671
网络攻防中黑客常用技术跨站脚本技术：DOM XSS高发场景透视及修复技巧、取值写入页面或动态执行、使用HTML5 postMessage进行跨域通讯、使用存在缺陷的第三方库或通用组件。 DOM-Based XSS是一种基于文档对象模型(Document Object Model,DOM)的Web前端漏洞，简单来说就是JavaScript代码缺陷造成的漏洞。与普通XSS不同的是，DOM XSS是在浏览器的解析中改变页面DOM树，且恶意代码并不在返回页面源码中回显，这使我们无法通过特征匹配来检测DOM XSS
记vue分步引导的坑 driver.js 与 vue-tour html2canvas 与 dom-to-image
weixin_39520640的博客
03-22 3503
由于项目需要加入用户指引，于是我就找了下相关的插件。一开始使用driver.js做了个demo感觉还是不错的，于是就准备使用driver.js，修改下样式就行了。 但是真正用设计图来设置时却发现了问题，由于项目是用vue编写的，根据设计图拆分了很多可复用的组件。设计图中很多需要高亮的dom节点都是在好几个组件之下的，driver.js获取不到，而且部分dom高亮时只有一个白色的框框覆盖，整了两天发现搞不定于是准备换插件。 在帖子上看到有人使用vue-tour插件，缺点是他的高亮跟没高亮一样，完全看不出来，但
HTML DOM对象之createElement（）方法
weixin_30892763的博客
09-04 264
今天在学习DOM节点操作时，发现了创建DOM节点的createElement（）方法的一个有意思的现象。 代码如下： 　　　　var box=document.getElementById("box");//假设网页中已经有个ID为box的元素； 　　　　var bbb=document.getElementById("bbb");//假设网页中已经有个ID为box的元素; 　　　　var...
JS——DOM操作（createElement、appendChild、insertBefore、removeChild的用法，及todolist案例）...
weixin_30709061的博客
05-20 421
（1）createElement(标签名)、appendChild(节点)的用法 讲解： （1）语法：document.createElement(nodename)【参数nodename为节点对象元素，必须】 即：该方法通过指定名称创建一个元素（创建一个节点） （2）语法：node.appendChild(node) 【参数node为节点对象，必须】即：该方法可向节点的子节点列表的末尾添...
html dom createelement,HTML DOM createElement()用法及代码示例
weixin_39523835的博客
06-16 695
在HTML文档中，document.createElement()是用于创建HTML元素的方法。如果无法识别指定的elementName，则创建使用elementName指定的元素，或者创建未知的HTML元素。用法var element = document.createElement("elementName");在以上语法中，elementName作为参数传递。 elementName指定创建...
DOM
爱踢粪球的虫
03-17 1151
自定义属性：自己命名的仅作为程序员编写时方便等属性目的：是为了保存并使用数据。有些数据可以 保存到页面中而不用保存到数据库中。h5规定自定义属性data-开头做为属性名并且赋值。但是只能获取以date- 开头的。dataset是一个储存了所有，以date开头的自定义属性对象的集合同样存在的缺点是，会获取返回所有的节点。事件的触发会判断触发事件的类型。
DOM操作
weixin_46742047的博客
03-05 506
DOM操作 文章目录DOM操作getElementById、getElementsByTagName、querySelectorAll、 getElementById、getElementsByTagName、querySelectorAll、
JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）
小张小张的博客
03-05 669
文章目录JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）一、节点操作1. 创建节点2. 插入节点3. 删除节点4. 替换节点5. 克隆节点二、获取元素的尺寸总结一、节点操作1. 创建节点2. 插入节点3. 删除节点4. 替换节点5. 克隆节点二、获取元素的尺寸 JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三） 一、节点操作 1. 创建节点 创建一个页面中没有的节点（无中生有） 语法：docu
常见的原生javascript DOM操作
weixin_34121304的博客
12-01 450
打个招聘广告： 杭州 阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@qq.com 看图识文（取自 寒冬winter 的微博）。文章里引用了MDN和《javascript高级程序设计3》里的知识。如有不对的地方，敬请指出。 1.创建元素 创建元素：document....
【转】JS写图层方法.document.createElement("div")
jinhua1314的专栏
03-07 2195
var docEle = function() { return document.getElementById(arguments[0]) || false; } function openNewDiv(_id) { var m = "mask"; if (docEle(_id)) document.removeChild(docEle(_id)); if (docEle(m)) documen
Javascript 创建新节点 document.createElement()
大剑师兰特的GIS世界
05-28 1992
在JavaScript中，创建新节点是DOM操作的重要组成部分，它允许你动态地向文档中添加内容。以下是创建新节点的详细说明、示例代码、注意事项以及常见应用场景。
vue将图片挂在的dom节点删掉，图片的内存会被释放掉吗
最新发布
06-05
这个坑点必须重点标注，正好对应ta提供的引用1中“onUnmounted不会被调用”的警告。考虑到图片预加载等场景，还要提醒用户注意JS中Image对象的回收。有些开发者会忽略DOM移除后，JS里仍持有图片引用的情况，这比DOM...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值