使用ajax将内容加载到div答案

【问题标题】：Load content into div using ajax使用ajax将内容加载到div
【发布时间】：2014-08-17 06:03:13
【问题描述】：

我正在使用 ajax javascript 将 view_login.php 中的内容加载到 index.php 的 div id="display" 中

var hr=new XMLHttpRequest();
hr.open("GET", 'view_login.php', true);
hr.onreadystatechange = function(){
    if(hr.readyState == 4 && hr.status == 200){
        var return_data = hr.responseText;
        document.getElementById('display').innerHTML = return_data;
    }
}
hr.send();

而不是echo $output，我只针对 div 本身。

PHP/HTML

$output = '
<div id="visible">
<form>
<input type="text" name="name"/>
<input type="submit" />
</form>
</div>';

echo $output;

是否可以只针对 div visible 及其内容而不是页面上的每个输出？不使用 jquery，只使用普通/原始 javascript。

【问题讨论】：

您是否费心阅读整个页面？
我认为正则表达式可以工作，但我不知道如何开始。
当然，如果您只想定位 id 为 visible 的 div，您应该使用 document.getElementById('visible') 或者这不是一个选项？而且我也不知道在这种情况下正则表达式应该做什么。

标签： javascript php ajax html-parsing

【解决方案1】：

在纯 JavaScript 中有几种方法可以做到这一点。一种方法是将 HTML 附加到 Document Fragment，这是一个单独的文档，然后在其上使用 querySelector 以仅提取所需的 div。

Demo

var frag = document.createDocumentFragment();
var div = document.createElement('div'); // create a div to contain the HTML
div.innerHTML = return_data; // insert HTML to the div
frag.appendChild(div); // append the div to the document fragment

var visibleDiv = frag.querySelector("#visible"); // find the #visible div

// append the div to the main document
document.getElementById('display').appendChild(visibleDiv);

其他选项有：

DOMParser（IE9+ 支持）。
将其作为 div 附加到主文档，但您需要确保它在视图中隐藏，然后获取 div 并将其删除。

【讨论】：