0

場合によっては、appendChild（）を使用してdivに追加することが可能ですが、それ以外の場合は機能せず、その理由を理解しようとしています。

動作：次のコードのようなものが正常に動作する他のコード例があります：

function fnAppend(){
   var oNewNode = document.createElement("LI");
   oList.appendChild(oNewNode);
   oNewNode.innerText="List node 5";
}

動作しません：これはまったく異なる例ですが、違いは微妙だと思います。作業中の既存のプロジェクトからこのコードを取得しているので、とにかくFieldSet関数を変更することはできません。むしろ、それを機能させる方法を理解しようとしています。

<html>
    <head>
        <script type="text/javascript">     
        function Fieldset() {

            this.id = "";
            this.content = document.createElement("DIV");
            this.content.id = "content";
            this.title = "Title";

            this.getFieldset = function() {
                var div = document.createElement("DIV");
                div.id = this.id;
                var span = document.createElement("SPAN");
                //var fieldset = document.createElement("DIV");
                //fieldset.id = "fieldset";
                var header = document.createElement("DIV");
                header.id = "header";
                span.appendChild(document.createTextNode(this.title));
                header.appendChild(span);
                div.appendChild(header);
                div.appendChild(this.content);
                //div.appendChild(fieldset);

                return div;
            }
        }

        var fieldset = new Fieldset();
        fieldset.id = "newid";
        fieldset.title = "new title";

        org_div1.appendChild(fieldset.getFieldset());

        </script>
    </head>
    <body onload="fieldset()">
        <div id='org_div1'> The text above has been created dynamically.</div>
    </body>
</html>
4

1 に答える 1

0

問題は、 を含む行にありonload="fieldset()"ます。fieldsetは関数ではなくオブジェクトなので、直接実行することはできません。

次のように、実行したいコードを関数でラップすることで、目的のものを得ることができます。

function createFieldset () {
    var fieldset = new Fieldset();
    fieldset.id = "newid";
    fieldset.title = "new title";

    org_div1.appendChild(fieldset.getFieldset());
}

次に、次のように body タグからこの関数を実行します。

<body onload="createFieldset()">

次の 2 点について言及する必要があります。

  1. Steve H. が述べたように、使用する前に org_div1 を初期化する必要があります。その ID を持つグローバル変数を介して到達可能な要素に依存することは、すべてのブラウザで 100% 信頼できるわけではありません
  2. コードは、新しいコンテンツを静的コンテンツの後ではなく前に挿入します。insertBeforeを使用したい

これらの 2 つの点に照らして、スクリプトの最後の行を次のように置き換えます。

var org_div1 = document.getElementById("org_div1");
org_div1.parentNode.insertBefore(fieldset.getFieldset(), org_div1);
于 2012-06-15T02:21:28.700 に答える