javascript - 如何使用 JavaScript 从 Ajax 响应字符串中正确提取 HTML 元素？

Question

我正在做一个不使用 jQuery 的项目。

我正在尝试使用 Ajax 从新页面加载帖子，但我不知道应该如何从返回的字符串中正确提取特定的 HTML 元素或特定 HTML 元素内的内容。

这是 HTML(我试图加载新内容的部分)的样子；

<div id="posts">
<div class="post"> 1 </div>
<div class="post"> 2 </div>
<div class="post"> 3 </div>
<div class="post"> 4 </div>
<div class="post"> 5 </div>
<!--posts-->
</div>

<div id="loadmore">Load More</div>

这是我尝试过的脚本的示例(它有效)；

function load(path) {  
  var req = new XMLHttpRequest();
  req.onreadystatechange = function() {
    if (req.readyState == 4 && req.status == 200) {
      var resp = req.responseText;
      var cont = resp.slice(resp.indexOf('id="posts">') + 11, resp.indexOf("<!--posts-->"));
      document.getElementById("posts").innerHTML = document.getElementById("posts").innerHTML + cont;
    }
  }
  req.open("GET", path, true);
  req.send();
}

var page = 1;
document.getElementById("loadmore").onclick = function () {
    page++;
    var pathToLoad = "/page/" + page;
    load(pathToLoad);
}

我觉得我这样做是最糟糕的，我的问题是如何以更好的方式从新页面加载“#posts”内的内容？

谢谢!

Answer 1

如果我理解您要查找的内容，您可以创建一个新元素并将responseText 插入该元素。

function load(path) {  
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (req.readyState == 4 && req.status == 200) {
            var resp = req.responseText,
                d = document.createElement('div');
            d.innerHTML = resp; // This way you have a dom node you can easily manipulate or iterate through

            for(var i = 0; i < d.getElementsByClassName("post").length; i++){
                var el = d.getElementsByClassName("post")[i];
                console.log(el.innerHTML);
                //Do stuff with the element you need to append.
            }

        }
     }
     req.open("GET", path, true);
  req.send();
}

使用 createElement 函数，您将获得一个 Element 对象，您可以轻松地使用和操作该对象来实现您的目的。这是元素对象的引用。

https://developer.mozilla.org/en-US/docs/Web/API/Element