导入/更改HTML内容(ES6更新后)

问题描述 投票:1回答:1

我一直在尝试通过导入外部HTML文件来动态更改HTML页面的内容。我找到了一种使用HTML导入的方法,但是如果我已经正确理解了这个功能,那么由于ES6更新,这个功能将会过时。从我在网上找到的东西,可能有一种替代的方法来使用JavaScript模块,但我找不到任何具体的东西。

我想要改变页面的一个重要部分(一个窗口包含一个窗体,成为一个展示用户统计信息的窗口),所以在javascript中使用.innerHTML似乎并不聪明。有没有人对如何导入html文件或动态更改页面内容有任何好的想法? (使用javascript,节点等)

任何帮助非常感谢:)

javascript html node.js es6-modules html-imports
1个回答
0
投票

我有点迟了,答案已经在这个问题的评论中被联系到了,但是我还是去了。

您应该能够使用Ajax来获取html文件内容。 (作为字符串)使用DOMParser类,您应该能够使用html文件的内容将其解析为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。

© www.soinside.com 2019 - 2024. All rights reserved.