javascript - 呼び出しを行ったスクリプトのノードの後に​​子を追加します

Question

次の呼び出しが完了すると、クラスは一連の要素 (フォーム) を作成し、それを呼び出したスクリプトの直後にそれらを追加したいと考えています。

私はさまざまな同様の質問を見てきましたが、それらの最高のものは、ページの最後のスクリプトの後に単純に追加するだけです.

頭ではうまく機能しますが、体では機能しません。

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

Answer 1

あなたのコメントのいくつかと他の同様のコメントに基づいて、私はこのようなことを考えましたが、うまくいくようです.

// 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);

致命的な欠陥があるかもしれないと思われる場合は、お気軽にコメントしてください。

Answer 2

スクリプトの後に要素を見つけて追加するには、何らかの種類の一意の識別情報が必要です。ID がある場合は document.getElementById() を使用できます。または、document.getElementsByTagName("script") を使用してスクリプト要素を取得し、必要なスクリプト要素を取得してから、appendChild() を使用できます。

Answer 3

わかりました、これが言及された恐ろしいハックです。

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について