在ajax 监听函数里面动态插入的标签节点，经过反复尝试，无法获取该标签的操作节点，Console.log结果总是null。

Question

<ul id="list">

</ul>
<script src="AjaxBase.js"></script>
<script>
var xhr = createXHR();
var name = "hh";
var olist = document.getElementById('list');
function read() {
    xhr.open('GET', 'show.php?type=query', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //刷新页面
            //得到返回的数据
            var oJson = JSON.parse(xhr.responseText);
            olist.innerHTML = '';

            if (oJson.status == 1) {

                for (var i = oJson.data.length - 1; i >= 0; i--) {
                    var span = document.createElement("span");
                    var img = document.createElement("img");
                    span.innerHTML = oJson.data[i].name + ':' + oJson.data[i].content;
                    var li = document.createElement("li");
                    li.appendChild(img);
                    li.appendChild(span);
                    var p = document.createElement("p");
                    p.innerHTML = "<label id='sp1'>编辑</label><label id='sp2'>删除</label>";
                    li.appendChild(p);
                    document.getElementById('list').appendChild(li);
                }
            }
        }

    }
    xhr.send(null);
}
timer = setInterval(read, 1000);
var obj = document.getElementById("sp1");
console.log(obj);// 显示null，获取不到？
</script>

Answer 1

建议题主了解下异步编程，和js中回调函数的执行方式。
对你你的代码，有两点，第一因为你调用了setInterval(),所以

timer = setInterval(read, 1000);

这句代码只是让浏览器在1s后把这个函数放如event loop中，等待执行，然后会立马返回接着执行你后面的getEl和console,所以别说获取了，在你console的时候，read都压根没有执行，这个可以通过在read中加console来证明。
再退一步，即使你不是通过setInterval来调用read，而是直接调用read，那也无法获取，道理同上，只不过这次read确实执行了

Answer 2

你也说了是监听函数里动态添加的。
也就意味着是在异步回调里添加的。
而异步函数是在JS的主线程结束之后才会被执行。
而你的var obj = document.getElementById("sp1");是非异步的。
他的执行要比异步回调要早，所以在你的dom结构里有这个元素之前上述语句就已经获取过了，所以是null
具体的可以查一下event loop

Answer 3

因为ajax一般是异步的，你获取数据的时候，下面的获取dom的代码已经执行了

Answer 4

事件代理，把事件代理在document上，根据触发的元素绑定事件