javascript - 在进行调用的脚本节点之后追加子节点

Question

当下面的调用完成后，该类创建一组元素（一个表单），然后我想在调用它的脚本之后将它们附加。

我一直在研究各种类似的问题，但其中最好的只是将其附加在页面上的最后一个脚本之后。

它会在头部很好地工作，但在身体上却不行。

<script type="text/javascript">
new exampleClass();
</script>

Answer 1

您应该有某种类型的唯一标识来在脚本之后查找和附加元素。如果您有 id，则可以使用 document.getElementById() 或 document.getElementsByTagName("script") 获取脚本元素并获取所需的脚本元素，然后使用 appendChild()

Answer 2

好的，这是提到的可怕的黑客攻击。

HTML

<div>Stuff</div>
<script type="text/javascript">
    noop();
</script>
<div>More stuff</div>
<script type="text/javascript">
    new ExampleClass();
</script>
<div>More stuff</div>
<script type="text/javascript">
    noop();
</script>
<div>More stuff</div>

Javascript

function noop() {}

function appendAfter(node, newNode) {
    if (node.nextSibling) {
        node.parentNode.insertBefore(newNode, node.nextSibling);
    } else {
        node.parentNode.appendChild(newNode);
    }
}

function ExampleClass() {
    window.addEventListener("load", function () {
        var scripts = document.getElementsByTagName("script"),
            div = document.createElement("div"),
            length = scripts.length,
            i = 0,
            script;

        div.appendChild(document.createTextNode("Inserted"));
        while (i < length) {
            script = scripts[i];

            if (script.firstChild && script.firstChild.nodeValue.indexOf("ExampleClass()") !== -1) {
                appendAfter(script, div);
            }

            i += 1;
        }
    }, false);
}

在jsfiddle 上

Answer 3

根据您的一些评论和其他类似的评论，我想过做这样的事情，而且它似乎有效。

// Generate random string we can use as element id
var rs = Math.random().toString(36).substring(2);;
// Document write an empty div with the above string as id
document.write('<div id="' + rs + '"></div>');
// Get the element to use for append
var ip = document.getElementById(rs);

如果您认为它可能存在致命缺陷，请随时发表评论。