我有以下内容:
<script type="module">
// some code here to get the <script>'s DOM reference
</script>
可以吗?
可能有任何类似的数字脚本。我想在脚本后面插入 HTML,而不需要明确的引用。
您可以使用经典的
<script>
来定义一些全局变量,然后依靠<script type="module">
的defer
的default这一事实,这意味着它们将在所有文档完全解析后按顺序执行,但在 DOMContentLoaded
发射之前。
此代码只是为了让您大致了解如何执行此操作,而无需通过一些
data-
属性向脚本标记提供显式标识符,然后您可以在其上运行 document.querySelector
。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
var counted = 1
var script = null
</script>
<p>content before first module script</p>
<script type="module">
document.addEventListener('DOMContentLoaded', () => {
console.log('content loaded')
})
script = document.scripts[counted++]
script.insertAdjacentHTML('afterend', `<p>inserted after ${counted - 1} module script</p>`)
console.log(script)
</script>
<p>content after first module script</p>
<script type="module">
script = document.scripts[counted++]
script.insertAdjacentHTML('afterend', `<p>inserted after ${counted - 1} module script</p>`)
console.log(script)
</script>
<p>content after second module script</p>
<script type="module">
script = document.scripts[counted++]
script.insertAdjacentHTML('afterend', `<p>inserted after ${counted - 1} module script</p>`)
console.log(script)
</script>
<p>content after third module script</p>
</body>
</html>