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

àì夳堔傛蜴生んèń 2021-09-30 05:48 294阅读 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 条评论，294人围观）

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

相关阅读

相关 Javascript DOM 选择元素详解

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

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

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

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

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

相关 DOM操作--创建、插入、删除元素

1、创建、插入元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

ゞ浴缸里的玫瑰/ 2024年02月17日 23:03/ 0 赞/ 59 阅读

相关 JavaScript DOM基础：查找元素

前言 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口)；DOM描绘了一个层次化的节点树,运行开发人员可

亦凉/ 2023年01月19日 07:17/ 0 赞/ 109 阅读

相关 JavaScript HTML DOM 元素（节点）

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

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

相关 JavaScript DOM页面元素操作

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

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

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

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

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

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

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

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

相关 JavaScript 操作HTML DOM元素

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

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

相关 JavaScript DOM appendChild添加子元素

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

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