时间戳

首页 > 解决方案 > 从另一个页面pureJS获取元素的innertHTML

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

问题描述

我想从另一个页面获取元素的 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>

标签： javascripthtml

解决方案

与 jQuery 获取页面并将文本插入元素的方式类似load，您可以使用内置fetchAPI 获取外部页面的文本，用于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当您想要选择与选择器字符串匹配的第一个元素时使用。

推荐阅读