A question on so replacing seems to be in accordance with the specification.
Structure
Another HTML file
CODE
<!-- another-html-file.html -->
<h1>Another HTML file</h1>
HTML file index.html
Script tag will be replaced in place with the content of another-html-file.html
CODE
<!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
)
)
})()
</script>
</body>
</html>
Result
CODE
<!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>
<h1>Another HTML file</h1>
</body>
</html>
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR