javascript通过appendChild(dom)方法插入一个dom元素无效

àì夳堔傛蜴生んèń 2021-09-30 05:48 257阅读 0赞

javascript通过appendChild(dom)方法插入一个dom元素：  
父dom的ID：thediv  
子dom的ID：closeImgContainer

insertCloseImage:function(){
                var titleDiv=document.getElementById("thediv");
                if(titleDiv){
                    closeImg=document.createElement("img");
                    closeImg.id="closeImgContainer";
                    closeImg.src="images/关闭.png";
                    closeImg.width="20";
                    closeImg.height="20";
                    closeImg.style.position="absolute";
                    closeImg.style.top="5px";
                    closeImg.style.right="5px";
                    closeImg.onclick=guanbi;
                    function guanbi(){
                        document.getElementById("thediv").style.display="none";
                        document.getElementById("closeImgContainer").style.display="none";
                    };
                    titleDiv.appendChild(closeImg);
                }  
            },

注意事项，经常会出现插入dom元素无效  
这种情况一般是父DOM再插入子元素以后又执行了其他操作，比如渲染echart图表等，可能导致子元素无效，即使代码都执行了。  
解决办法：  
父DOM所有操作执行结束后，再执行插入子元素。  
经验总结：  
**也就是说，插入子元素，最好放最后执行，以减少其他操作对其影响的概率。**

发表评论取消回复

表情：

评论列表（有 0 条评论，257人围观）

还没有评论，来说两句吧...

相关阅读

相关 Javascript DOM 选择元素详解

在JavaScript中，选择DOM元素是进行网页动态操作的基础。以下是几种常用的元素选择方法，包括原生JavaScript方法和jQuery库（作为一种广泛应用的库）的...

逃离我推掉我的手/ 2024年05月28日 10:14/ 0 赞/ 38 阅读

相关大量插入dom元素的方法（性能问题）

试的时候做到一道题：向`<ul id="root"></ul>`插入1000条`<li>我是li标签</li>`标签一般我们会想到使用循环，但是，由于渲染回流...

╰+哭是因爲堅強的太久メ/ 2024年04月19日 12:56/ 0 赞/ 36 阅读

相关 JavaScript HTML DOM 元素（节点）

JavaScript HTML DOM 元素（节点） -------------------- 添加和删除节点（HTML 元素）。创建新的 HTML 元素如

梦里梦外;/ 2022年09月29日 14:51/ 0 赞/ 305 阅读

相关原生JavaScript Dom方法

在原生JS中，所有的节点都是Node类型。获取节点 document.querySelector document.querySelectorAll query

╰半夏微凉°/ 2022年06月18日 07:08/ 0 赞/ 161 阅读

相关解决给dom元素绑定click等事件无效问题的方法

JavaScript客户端脚本语言 Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语

末蓝、/ 2022年06月13日 11:50/ 0 赞/ 503 阅读

相关 JavaScript DOM页面元素操作

DOM 页面元素操作 DOM（document object model）概念：文档：document，一个页面就是一个文档。也是页面的对象节点：页面的所

梦里梦外;/ 2022年05月13日 02:20/ 0 赞/ 256 阅读

相关在元素外插入一个元素

eg：document.body.insertAdjacentHTML("afterend","<p>hello world</p>"); ![watermark_ty

浅浅的花香味﹌/ 2021年10月24日 05:58/ 0 赞/ 266 阅读

相关 javascript通过appendChild(dom)方法插入一个dom元素无效

javascript通过appendChild(dom)方法插入一个dom元素：父dom的ID：thediv 子dom的ID：closeImgContainer

àì夳堔傛蜴生んèń/ 2021年09月30日 05:48/ 0 赞/ 258 阅读

相关 JavaScript 操作HTML DOM元素

DOM概念 DOM是文档对象模型的简称，全名为“Document Object Model”，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

小灰灰/ 2021年09月14日 02:18/ 0 赞/ 583 阅读

相关 JavaScript DOM appendChild添加子元素

目录 1.在末尾添加元素： 2.移动元素至末尾或至另一个元素的末尾： -------------------- 1.在末尾添加元素，实例：

悠悠/ 2021年07月25日 00:43/ 0 赞/ 424 阅读