Question

我有一个javascript （AJAX），定期让XMLHttpRequest从PHP文件中获取一些数据，然后将返回的数据追加到{{ ＆lt; p＆gt;的1}}标签。但是，每次将新内容添加到块时，段落的整个内容似乎都会重新加载：当我选择一些文本时，选择会在数据更新时消失。

以下是代码：

innerHTML

如何在innerHTML static 中进行更改？

Answer 1

您可以尝试.insertAdjacentHTML()

这是您在这种情况下所需要的，因为insertAdjacentHTML将结果节点插入到指定位置（第一个参数）的DOM树中，但不会重新分析孔树。

document.getElementById('data').insertAdjacentHTML('beforeend', data);

Answer 2

不幸的是使用innerHTML总是会破坏以前的内容，如果你使用jQuery，你可以使用append方法，你还没有提到jQuery，所以我假设你不使用它。

您可以改为使用insertAdjacentHTML（）而不是innerHTML，此方法要求您将下面的一个位置作为第一个参数传递，然后传递您要添加的文本。

'beforebegin' // Before the element itself.
'afterbegin' // Just inside the element, before its first child.
'beforeend'  //Just inside the element, after its last child.
'afterend'  //After the element itself.

在你的情况下，它的外观如何：

document.getElementById('data').insertAdjacentHTML('beforeend', html_to_insert);

Answer 3

我没有对它进行过测试，但我认为，如果每次收到新响应时附加一个新容器，这都会有效：

    function requestChange(){
        setInterval(updateData, 2000);
    }

    function updateData(){
        var req = new XMLHttpRequest();
        var url = "content_provider.php";
        req.open("POST", url, true);
        req.send();

        req.onreadystatechange = function(){
            if(req.readyState == 4 && req.status == 200){
                var data = req.responseText;
                var newInfoBox = document.createElement('SPAN');
                newInfoBox.innerHTML = data;
                //updating the innerHTML content
                document.getElementById('data').appendChild(newInfoBox);
            }
        };
    }

</script>

<body onload="requestChange()">
        <p id="data"></p>
</body>

如何在不修改整个内容的情况下更新innerHTML？

如何在innerHTML static 中进行更改？

3 个答案: