Question

我有这样的HTML

<div id="content">
    <h1>Shop Sample</h1>
    <h2>View HTML-Source to see the embedded js</h2>

    <script src="js/faq_embd.js"></script>
    <div id="response-area">

    </div>
</div>

现在，faq_embd.js应该可以在其自己的<script>标签下呈现html。

在js中，如何确定标签在哪里以及如何在标签下附加？

Answer 1

您可以使用以下内容。这将在脚本下方设置一个段落。您可以通过检查DOM进行验证

document.getElementsByTagName("script")[1].insertAdjacentHTML('afterend', '<p id="idChild"> content html </p>');

<div id="content">
    <h1>Shop Sample</h1>
    <h2>View HTML-Source to see the embedded js</h2>

    <script src="js/faq_embd.js"></script>
    <div id="response-area">

    </div>
</div>

Answer 2

您可以使用document.currentScript查找当前脚本元素。请注意，Internet Expolorer根本不支持它（查看兼容性表，https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript），因此，以corss-browser方式获取当前脚本元素的一种简单方法是为标签提供固定的ID，然后找到它与document.getElementById()。

出于性能考虑，在使用DOM之前，请尝试使用document.currentScript检索当前脚本标签。

例如，具有这样的html

<div id="content">
  <h1>Shop Sample</h1>
  <h2>View HTML-Source to see the embedded js</h2>
  <script id="script-id" src="js/faq_embd.js"></script>
  <div id="response-area"></div>
</div>

您可以使用以下代码在当前脚本标签下创建一个新段落：

var yourScript = document.currentScript || document.getElementById("script-id");
var yourParagraph = document.createElement("p");
if (yourScript.nextSibling){
  yourScript.parentNode.insertBefore(yourParagraph, parentGuest.nextSibling);
} else {
  yourScript.parentNode.appendChild(yourParagraph);
}

如何找出当前脚本标签的位置？

2 个答案: