Javascript - 在脚本位置插入元素

Javascript - Insert element at script position

本文关键字：插入 元素 位置 脚本 Javascript      更新时间：2023-09-26
如何在

脚本位置插入元素（不依赖于div 的 id 或类），例如

<div class="div">
    <script src='//remotehost/js/addDivSayHello.js'></script>
</div>

其中addDivSayHello.js将插入div 子<div>hello</div>，结果示例：

<div class="div">
    <div>hello</div>
    <script src='//remotehost/js/addDivSayHello.js'></script>
</div>

我尝试在Stackoverflow中搜索，但一无所获。

您可以使用

insertBefore方法。像这样：

var div = document.createElement('div'), // Create a new div
    script = document.scripts[document.scripts.length - 1]; // A reference to the currently running script
div.innerHTML = 'Hello'; // Add some content to the newly-created div
script.parentElement.insertBefore(div, script); // Add the newly-created div to the page

jsFiddle的现场演示。请注意，您也可以使用外部脚本。

您可以使用 insertAdjacentHTML： https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML

var node = document.querySelector('script[src="js/addDivSayHello.js"]');
node.insertAdjacentHTML('beforebegin', '<div>hello</div>');

$("div.div").prepend('<div>hello</div>');

您必须在某个时候调用脚本我喜欢使用jQuery添加一个元素 http://api.jquery.com/append/你必须说你想在哪里添加：

$(".div")

以及那里应该发生什么：

.append("<div>Hello</div>")

所以它看起来像这样：

$(".div").append("<div>Hello</div>")

另一种解决方案，它不会将所有内容包装在div 中，并且可以多次重复使用而不会产生任何影响：

function insertHtmlToDocumentAtCurrentScriptPosition(htmlStr)
{
    var scriptTag = document.getElementsByTagName('script');
    scriptTag = scriptTag[scriptTag.length - 1];
    var parentTag = scriptTag.parentNode;
    parentTag.innerHTML += htmlStr;
}

该函数将 html 作为字符串，因此可以这样调用它：

insertHtmlToDocumentAtCurrentScriptPosition(`<p>Hello</p>`);
相关文章：