Question

使用mootools我有一个'builder'类来制作表单对象，动态创建div。一些表单对象由几个不同的对象组成。例如，选择对象具有用于过滤选择器内容的文本框和用于保存选择的按钮。

在这种情况下，我希望过滤器框和按钮位于div中，该div附加到整个表单对象的div上，以便有一个“包装器”。

但是，我在向动态创建的表单对象的div附加时遇到问题。

加载dom后，调用'builder'类：

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

Builder会创建一个新的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。将创建过滤器文本框以及按钮。

这是我遇到问题的地方。（由于过滤器文本框和按钮的问题相同，我只会描述文本框的情况）

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

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

当我尝试将此div附加到form_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);
  }

收率：

"Uncaught TypeError: Cannot call method 'appendChild' of null"

我不知道如何解决这个问题。我觉得我想要附加的div在我尝试追加时并不存在。但是，我认为无法生成一个事件，告诉我它何时存在，以便我可以推迟构建任何“子”div，直到那一点

Answer 1

右。你做的几件事情都不是偶然的。

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，但这种方式会破坏使用为您修复内容的库的目的。

另一方面，做你正在做的事情并不容易，我正在与我的朋友（好吧，同事！）合作form-builder（对于mootools，AMD）和它你可能想要做什么，或多或少 - 输入类型，组，由值（在所有类型上）触发的无限依赖项，各种表单元素和自定义外观/感觉，验证器，默认值，占位符，自定义事件..模型/控制器，如行为，默认值，服务器端数据/验证，每个输入数据持久化（sessionStorage / window.name）

通过AMD构建器清单创建，支持通过twitter引导标记和元素进行版本控制，分页和语言，以及通过主题标签支持单页缓存应用程序...基本上，它确实是一项重大任务。

如果我们决定开源它（我希望我们可以），并且ppl有兴趣，谁知道 - 你几乎可以构建诸如交互式测试，调查猴子，快速形式，复杂形式等等。 ......它的可扩展性和灵活性。希望我们完成它....

Answer 2

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

e.g。

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

Answer 3

getElementById只需 string parameter 。它正在返回null，因为您将对元素的引用传递给方法。
我建议你摆脱getElementById。只需使用您已添加到要添加元素的div的引用。

form_obj.div.appendChild(this.div);

希望它有所帮助。

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

3 个答案: