为什么不能将Child追加到指定的DIV？

Question

In some cases it is possible for me to use appendChild() to add to a div, but in other cases it does not work and I am trying to understand why: 在某些情况下，我可以使用appendChild（）将其添加到div中，但在其他情况下，它不起作用，并且我试图了解原因：

Works: I have other code examples where something like the following code works fine: 作品：我还有其他代码示例，例如以下代码可以正常工作：

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

Does not Work: I know this is a totally different example, but I presume the difference is subtle. 不起作用：我知道这是一个完全不同的示例，但是我认为区别是微妙的。 I am pulling this code from an existing project I am working in, so I can not change the FieldSet function in anyway, rather I am trying to understand how to make it work. 我正在从正在处理的现有项目中提取此代码，因此无论如何我都无法更改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>

Answer 1

The problem is in the line containing onload="fieldset()" . 问题出在包含onload="fieldset()" 。 fieldset is an object, not a function, so you can't execute it directly. fieldset是一个对象，而不是一个函数，因此您不能直接执行它。

You can get what you're aiming for by wrapping the code you want to run in a function, like this: 您可以通过将要运行的代码包装在函数中来获得目标，如下所示：

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

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

Then, execute this function from the body tag, like this: 然后，从body标签执行此功能，如下所示：

<body onload="createFieldset()">

Two points should be mentioned: 应该提到两点：

As Steve H. mentioned, you should initialize org_div1 before using it. 正如Steve H.提到的，您应该在使用org_div1之前对其进行初始化。 Relying on elements being reachable through a global variable with that ID is not 100% reliable in all browsers 在所有浏览器中，依靠具有该ID的全局变量可访问的元素并不是100％可靠的
Your code inserts the new content before the static content, not after. 您的代码将新内容插入到静态内容之前，而不是之后。 You want to use insertBefore 您要使用insertBefore

In light of those two points, I would replace the last line of your script with this: 考虑到这两点，我将用以下内容替换脚本的最后一行：

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

为什么不能将Child追加到指定的DIV？

问题描述

1 个解决方案

解决方案1
0 2012-06-15 02:21:28

为什么不能将Child追加到指定的DIV？

问题描述

1 个解决方案

解决方案1 0 2012-06-15 02:21:28

解决方案1
0 2012-06-15 02:21:28