记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法

今天再优化blog页面的时候添加了个关注按钮和图片，但是页面上这个按钮和图片时有时无，本来是搞后端的，被这个前端的小问题搞得抓耳挠腮的！

网上各种查询解决方案，把我解决问题的艰辛历程分享出来，希望大家遇到这些问题能少走弯路！

先来看看网上各位大佬的解决方案：
方案一：事件代理
思路：因为最开始他们共同的父级content是在HTML结构中的，所以将两个单击事件代理给content，通过单击获得的class名来判断点击的是哪一个对象，再进行具体操作

$('#content').on('click',function (e) {
    var target=e.target||e.srcElement;//获取当前点击的对象
    var cls=target.className;//获取当前点击对象的class名
    if(cls==='addcart'){//如果点击的是加入购物车
       console.log('addcart')
    }else if (cls==='buy') {//如果点击的是立即购买
       console.log('buy')
    }
});

方案一分析：

append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效。

问题深入探究：

方案一中的事件代理是可以解决不会显示的问题，可事件代理有个前提是需要 click 点击事件来触发的，而我的页面是不需要单机事件的，我的页面一个是div.html(),覆盖原来的DIV，另一个是

$("#p_b_follow").append(gz); 代码如下：

<script>
    $(document).on('green_channel', function() {
        <!--添加打赏-->
        var das= '<img src="https://images.cnblogs.com/cnblogs_com/aitree/1916628/o_210115052741%E6%89%93%E8%B5%8F.png">';
        $("#green_channel").html(das);
    });
     $(document).on('p_b_follow', function() {
        <!-- 添加关注 -->
        var gz = '<a onclick=onclick="follow(\'451c91ea-4f17-4353-c7f3-08d8ae5fa907\')" href="javascript:void(0)" style="color: white !important;">+加关注</a>';
        $("#p_b_follow").append(gz);
    });
</script>

方案一并不适用！接下来我就找到了

方案二：动态往div中添加元素：

创建子节点、  父元素动态添加子元素：

            //获取div
            var div = document.getElementById("DvelopmentTarget");  

            //换行
            var br = document.createElement("br");
            div.appendChild(br);  

            //添加label ，存放指标名称
            var div2 = document.createElement("label");
            div2.innerText = data[n].QualitativeTargetName;
            div.appendChild(div2);  

            //添加text ，存放指标权重
            var input = document.createElement("input");
            input.setAttribute('type', 'text');
            input.setAttribute('ReadOnly', 'True');  //设置文本为只读类型
            input.value = data[n].DevelopmentAllWeight
            div.appendChild(input);  

            //添加select 存放指标id
            var targetID = document.createElement("select");
            targetID.innerText = data[n].QualitativeTargetID;
            targetID.setAttribute('hidden', 'hidden');
            div.appendChild(targetID);
            //添加 %(单位百分比)  

            //换行
            var br = document.createElement("br");
            div.appendChild(br);   

方案二分析：

这种 appendChild()方法我也试了,仍然没有任何效果，还是按钮和图片时有时无！

突然想到以前做过Layui 的前端web页面，里面有一段：

$(document).ready(function()
{
   //回写数据
   $("#nameFour").val(other[1]);
   $("#mobileFour").val(other[2]);
    form.render();
});

$(document).ready(function() 是加载页面的时候执行；

form.render();  Layui页面的重新渲染；

深入分析：

既然回写完数据有form.render(); 页面的重新渲染，就说明是页面加载后才会回写数据，不然也定位不到页面上的id 元素/节点；$(document).ready(function() 其实是页面加载过后才开始执行！

如果是这样，那我想着在页面上加载个div 重载？

然后网上找了半天也没找到可以用的 div 重载 方法!

回过头一想：

这些方法 .append、html、appendChild、repend... 其实都是在页面加载完成后才添加的，只有刷新才会更新到页面当中，所以就有了开头的按钮和图片时有时无的情况！

然后我就想到了JS的延迟加载，是否可以在页面加载后，在执行页面的重写和覆盖了？

终极解决方案如下：   

<script>
    $(document).on('green_channel', function() {
        <!--添加打赏-->
        var das= '<img src="https://images.cnblogs.com/cnblogs_com/aitree/1916628/o_210115052741%E6%89%93%E8%B5%8F.png">';
        // $("#green_channel").html(das);
        setTimeout(function(){ $("#green_channel").html(das); }, 300);
    });
     $(document).on('p_b_follow', function() {
        <!-- 添加关注 -->
        var gz = '<a onclick=onclick="follow(\'451c91ea-4f17-4353-c7f3-08d8ae5fa907\')" href="javascript:void(0)" style="color: white !important;">+加关注</a>';
       // $("#p_b_follow").append(gz);
        setTimeout(function(){ $("#p_b_follow").append(gz); }, 200);
    });
</script>

　　setTimeout(function(){func()，time}方法 延迟执行覆盖和写入，完美的解决了Js动态加载页面.append、html、appendChild、repend等添加元素节点不生效的问题,

而且也不需要 “单击事件” 和 “页面重新渲染”!