为什么我不能将孩子追加到指定的DIV?

时间:2012-06-14 14:47:10

标签: javascript

在某些情况下,我可以使用appendChild()添加到div,但在其他情况下它不起作用,我试图理解原因:

Works:我有其他代码示例,其中类似以下代码的工作正常:

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>

1 个答案:

答案 0 :(得分: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()">

应该提到两点:

  1. 正如Steve H.所说,你应该在使用之前初始化org_div1。通过具有该ID的全局变量可以访问的元素在所有浏览器中都不是100%可靠
  2. 您的代码会在静态内容之前插入新内容,而不是之后。您想使用insertBefore
  3. 鉴于这两点,我会用这个替换你脚本的最后一行:

    var org_div1 = document.getElementById("org_div1");
    org_div1.parentNode.insertBefore(fieldset.getFieldset(), org_div1);