Question

我想从另一个页面获取元素的innerHTML。我知道用jQuery（$ load）解决此问题的方法，但我想使用纯Javascript。示例代码段；

text = another element innerHTML from another page;
document.getElementsByClassName('show').innerHTML = text;
//pure JS codes will here

<div class="show"></div>

Answer 1

类似于jQuery的load获取页面并将文本插入到元素中的方式，您可以使用内置的fetch API来获取外部页面的文本，使用DOMParser可以从响应中选择所需的元素，然后将其插入DOM。例如：

fetch(url)
  .then(res => res.text())
  .then((responseText) => {
    const doc = new DOMParser().parseFromString(responseText, 'text/html');
    const elm = doc.querySelector('.foo');
    container.textContent = elm.textContent;
  });

const responseText = '<div class="foo">foo content</div>';
const doc = new DOMParser().parseFromString(responseText, 'text/html');
const elm = doc.querySelector('.foo');
container.textContent = elm.textContent;

<div id="container"></div>

还请注意

document.getElementsByClassName('show').innerHTML = text;

不起作用，因为getElementsByClassName返回HTMLCollection，而不是单个元素。相反，当您要选择与选择器字符串匹配的第一个元素时，请使用querySelector。

Answer 2

re：document.getElementsByClassName（'show'）。innerHTML = text;

您可能需要使用

document.getElementsByClassName（'show'）[0] .innerHTML = text;

使其起作用。

关于获取文档，按照@CertainPerformance答案，在ES6中使用fetch，在较早版本中使用XMLHttpRequest。

从另一个页面pureJS获取元素的innertHTML

2 个答案: