A question on stackoverflow: Include another HTML file in a HTML file I was playing around and came up with a clean way to do it with: 1) Reading a content of the file with fetch() 2) Rendering a DOM Node from string 3) Replacing tag with the DOM Node in place.</p> <p>Removing the <script> tag is mentioned in the HTML spec para 4.12.1.1 Processing model so replacing seems to be in accordance with the specification.</p> <h2> Structure </h2> <p><img src="https://img.php.cn/upload/article/000/000/000/173093868549292.jpg" alt="Inject HTML snippet from file"></p> <h2> Another HTML file </h2> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!-- another-html-file.html --> <h1>Another HTML file</h1> </pre><div class="contentsignin">Copy after login</div></div> <h2> HTML file index.html </h2> <p>Script tag will be replaced in place with the content of another-html-file.html<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> (() => { const thisScript = document.currentScript fetch('./another-html-file.html') .then( (res) => ( res.ok // checking if response is ok ? res.text() // return promise with file content as string : null // return null if file is not found ) ) .then( (htmlStr) => ( htmlStr // checking if something is returned ? thisScript.replaceWith( // replace this script tag with the DOM Node created from string document.createRange().createContextualFragment(htmlStr) ) : thisScript.remove() // fallback to remove script if null is returned ) ) })()
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
