香草js，相当于通过XMLHttpRequest通过div id进行“加载页面片段”

Question

出于学习目的，请尝试不使用jQuery获取远程内容。

以下代码段效果很好。它获取两个div并将它们放在当前页面中。

正在获取原始要点：

<div class="remote" id='one'>one</div>
<div class="remote" id='two'>two</div>

function remoteFetch() {
  var xhr = new XMLHttpRequest();
  var varUrl = 'https://gist.githubusercontent.com/persianphilosopher/b0d4e948da801d09969b4ac6f5c0206d/raw/d139dd28e2cd5a73a4b38f489c8462c755c342c6/temp';

  xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
      if (xhr.status == 200) {

        document.getElementById("here").innerHTML = xhr.responseText;
      }
    }
  }
  xhr.open("GET", varUrl, true);
  xhr.send();
}
remoteFetch();

<div id="here"></div>

问题：我不知道是什么与下面的jQuery位等效：

$("#here").load("varUrl #one");

这将允许我仅按其ID提取div。

我在SO上找到的最接近的是this answer，但我未能根据自己的需要调整here。

谢谢。

Answer 1

您的Codepen中的实现几乎可以正常工作，我在此fork中纠正了两个问题：
https://codepen.io/anon/pen/VdJYVG?editors=1010

第一个问题是svgDoc.getElementsById上的错字，应该是svgDoc.getElementById。
第二个问题是DOMParser中的解析问题。您正在传递text/xml作为预期的MIME类型，而您要解析的内容是text/html。