记录Js动态加载页面.append、html、appendChild、after、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等添加元素节点不生效的问题,
而且也不需要 “单击事件” 和 “页面重新渲染”!
