我一直在尝试通过导入外部HTML文件来动态更改HTML页面的内容。我找到了一种使用HTML导入执行此操作的方法,但是如果我正确理解它,由于ES6更新,此功能将过时。从我设法在网上找到的东西,也许可以找到使用javascript模块执行此操作的另一种方法,但我找不到任何具体的方法。

我想更改页面的很大一部分(一个包含表单的窗口,成为显示用户统计信息的窗口),因此在JavaScript中使用.innerHTML似乎并不明智。是否有人对如何导入html文件或动态更改页面内容有任何好的建议? (使用javascript,node等)

任何帮助,不胜感激:)

最佳答案

我来晚了,这个问题的评论中已经链接了答案,但是无论如何我还是去了。

您应该能够使用Ajax来获取html文件的内容。 (作为字符串)
有了html文件的内容,您应该可以使用DOMParser类将其解析为JS中的htmlDoc(例如,来自document的全局document.getElement等)。

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

https://codepen.io/Deefoozy/pen/PeYWge

将html解析为htmlDocument之后,您应该能够使用.getElement.body.children通过结果获取正文。这样的结果应该是一个简单的domNode,您可以将其附加到另一个domNode上。

09-20 23:26