如何使用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

Answer 2

已经快一个月了，我正忙于其他工作，所以我迟到了。 这个项目是我的最爱。 该项目的很大一部分还专注于动画（在JavaScript中）。

在过去的一个月里，我已经学到了很多有关“实用JavaScript”的知识（以前我对jQuery比较懒），我制作了一个小库以避免重复，主要是我仍然会使用本机JavaScript，因为它很酷。 我的库是对我的项目的JavaScript的补充，不要再懒了-哦，不。

也永远不要再回到jQuery或使用我不懂的任何东西了。 遵守我的规则。

这是我在@gmast的帮助下所做的。 它有效，现在我很满意。

function load(path) {
    var rUrl = path.substring(0, path.indexOf(" ")),
    rSelector = path.substring(path.indexOf(" ") + 1),
    req = new XMLHttpRequest();
    req.open("GET", rUrl, true);
    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            var nDoc = document.createElement('div'), nElem, length, i;
            nDoc.innerHTML = req.responseText;
            nElem = nDoc.querySelectorAll(rSelector);
            length = nDoc.length;
            for (i = 0; i < length; i += 1) {
                 document.getElementById("posts").appendChild(nElem[i]);
            }
        }
    };
    req.send();
}

然后我这样称呼；

var pageNumber = 1;
document.getElementById("loadmore").addEventListener("click", function () {
    pageNumber++;
    var pathToLoad = "/page/" + page + " #posts > .post";
    load(pathToLoad);
});

说明：

我将getElementsByClassName更改为querySelectorAll的原因是因为我将使用它做更多事情，并且我在项目中必须使用的实际代码对于回调和许多其他对象而言更加复杂。 如果我不必将此函数用于多种不同的事情，则我希望使用@gmast建议的getElementsByClassName 。

将元素的长度移出for循环很重要，否则会产生错误，因为在这里，我要在每个循环中删除一个元素。 可以选择不使用增量（即不使用i++ ， i += 1等）来解决问题。

如果您在@gmast的回答下看到我的评论，您将看到我在谈论获取“ [object HTMLDivElement]”，这是因为innerHTML接受HTML而不是对象，并且我的意思是数字。

我对与DOM连接的大部分JavaScript都不了解。 现在我好了。