使用Javascript和mootools附加到动态创建的div

使用mootools，我有一个“builder”类，它可以生成表单对象，并在创建div时动态创建div。 一些表单对象由几个不同的对象组成。例如，选择对象具有一个过滤选择器内容的文本框和一个保存选择的按钮

在本例中，我希望过滤器框和按钮位于一个div中，该div被附加到整个表单对象的div中，以便有一个“包装器”

但是，在动态创建的表单对象的div中追加内容时遇到了一个问题

加载dom后，将调用“builder”类：

window.addEvent('domready', function()
{
builder = new Build();
});         

生成器会创建一个新的div

var div = document.createElement('div');
var div_id = 'the_div_id_for_my_form_object';

div.setAttribute('id', div_id);

然后创建表单对象，该对象将div作为其参数之一

var form_obj = superSelector(div);

在form_obj构造函数中，此div保存为成员变量this.div=div。 将创建过滤器文本框和按钮

这就是我发现问题的地方。（因为过滤器文本框和按钮的问题是相同的，所以我只描述文本框的情况）

表单_obj的div被传递给过滤器文本框的构造函数。 创建过滤器文本框时，它会为自己创建一个div

 var div = document.createElement('div');
 var div_id = 'the_div_id_for_my_filter_box';

当我尝试将这个div附加到表单_obj的div时，我得到一个js错误，表示我正在尝试附加到'null'

 var filterBox = new Class({
 initialize: function(name, form_obj)
 { 
   this.name = name;

   this.div = document.createElement('div');
   this.div.setAttribute('id', name);

   document.getElementById(form_obj.div).appendChild(this.div);
  }

收益率：

“未捕获的TypeError:无法调用null的方法'appendChild'”

我不知道该怎么解决这个问题。我感觉我想要附加到的div在我尝试附加到它时不存在。但是，我看不到生成事件的方法，该事件会告诉我它何时存在，这样我就可以推迟任何“子”div的构造，直到该点为止

尝试将“form_obj”参数发送到getElementById，而不是div本身。错误似乎表明当前使用的方法无法在DOM中找到div。getElementById将目标div的id属性作为字符串

e、 g

---

getElementById

只接受一个。它返回

null

，因为您正在将对元素的引用传递给该方法。
我建议您去掉

getElementById

。只需使用对要将元素附加到的

div

的引用即可。

---

希望能有帮助。

对。你做的几件事都不是情绪化的

var div = document.createElement('div');
var div_id = 'the_div_id_for_my_form_object';

div.setAttribute('id', div_id);

应该是：

var div = new Element('div', {
    id: 'the_div_id_for_my_form_object'
}); // or even new Element('div#foobar'); 


div.setAttribute('id', div_id); -> div.set('id', div_id);

然后附加到dom：

document.getElementById(form_obj.div).appendChild(this.div);

为什么?？你想干什么？抓取一个元素并添加到内存中的div

document.id(form_obj.div).inject(this.div); 
// if this element exist, it will be moved as a child to the new div, not safe
// you really ought to rewrite to:
var el = document.id(form_obj.div);
el && el.inject(this.div); 

请记住，此时还没有将这个div注入dom

等等。阅读手册/api-您可以始终使用本机js，但这样会破坏使用库为您修复问题的目的

另一方面，做你正在做的事情并不容易，我目前正在和我的一个朋友（同事！）一起做一个

表单生成器
（对于mootools，AMD），它做你可能想做的事情，或多或少-输入类型，组，由值触发的无限依赖（在所有el类型上），各种表单元素和自定义外观/感觉、验证器、默认值、占位符、自定义事件。。类似于模型/控制器的行为、默认值、服务器端数据/验证、每个输入数据的持久化（sessionStorage/window.name）

使用AMD builder清单创建，该清单支持通过twitter引导标记和元素进行版本控制、分页和语言，并通过哈希标记创建单页restful应用程序。。。基本上，这确实是一项艰巨的任务

如果我们决定开放源代码（我希望我们可以），ppl有兴趣，谁知道呢-你几乎可以用它来构建交互测试、调查猴子、快速表单、复杂表单等等。。。它具有可扩展性和灵活性。希望我们完成它….
getElementById
只接受字符串作为参数，似乎您正在传递引用。对不起，让我修改一下。谢谢你指出这一点。在本例中，将div id提供给getElementById不会产生错误，但子div不会出现在DOM中。我正在调查页面加载完成后，尝试打开Javascript控制台并自己运行选择器，看看问题是选择器还是所有事情的时间：>>document.getElementById（“expected_div_id”）明白了，谢谢。这实际上有一个更深层次的问题。我使用getElementById发布了这个问题，但我以前尝试过使用引用。我得到了未捕获的TypeError：无法调用undefined的方法“appendChild”。但是是的，getElementById对我来说是愚蠢的，因为我没有通过考试string@TomSt.Laurent尝试使用
console.log
或
alert
调试代码，查看在
表单中丢失对
div
的引用的位置。或者，您可以将代码发布到
form_obj
构造函数中，这样我们就可以看到您是否遗漏了一些内容。非常感谢您提供的提示。事实证明，我在其他地方遇到了一些AJAX问题，等等。但我现在要100%使用mootools！祝这个表单生成器好运，如果你想开源的话，请发表一些评论来推广它。我很想去看看
document.getElementById(form_obj.div).appendChild(this.div);

document.id(form_obj.div).inject(this.div); 
// if this element exist, it will be moved as a child to the new div, not safe
// you really ought to rewrite to:
var el = document.id(form_obj.div);
el && el.inject(this.div);