Javascript 用于动态创建div的方法

因此，我正在开发一个web应用程序，允许用户为网站创建前端主题；我这么做主要是为了提高我的JS技能

我在下面的代码中所做的是创建跨越页面宽度的“框”，我希望允许用户编辑每个框

我面临的问题是，我可以选择用户单击的类/id以及我为用户想要的所有元素设置的div；但是，我似乎无法将任何DOM方法附加到对象上

错误为未捕获类型错误：对象EditBox没有方法“innerHTML”，其中“innerHTML”可以是任何方法。我还尝试了Jquery的.html，得到了相同的结果

     for(i=1; i <= boxes; i++) {
                    box.innerHTML = box.innerHTML + [
                    "<div class = 'globalBox' id = 'box"+i+"'>",
                    "<div class = 'editDyBox'>edit this box <div class = 'editBoxes'></div<!--end edit boxes--></div>",
                    "</div><!--end box-->",   
                        ].join('');
                    }//end for
                 $(".globalBox").css("width", width+"%");

                     $(".editDyBox").click(function(){
                       var parentClass = $(this).parent().attr("id");
                       var childClass = $(this).children().attr("class");
                       var customEdit = $(this).attr("class");
                       var editBoxForm = "<form class = 'editBoxForm'><input type = 'text' name = '"+parent+"' width = '100%'></form>";

                       childClass.innerHTML("hello")
                    });//end editdybox click

for（i=1；i删除此

childClass.innerHTML("hello")

由此

$(this).children().innerHTML("hello");

你为什么不使用复杂的代码来代替它呢？
它就是为此而设计的

看看这个

我就是内容

浏览器支持它（是的，甚至IE5）

这是一个普通的div，因此它跨越了所有可用的宽度，并且他的内容是可编辑的。没有JS或CSS nedded。
此行返回一个字符串，而不是jQuery对象

var childClass = $(this).children().attr("class");

因此，您的变量childClass将只是一个简单的字符串对象，它永远不会有innerHTML方法

此外，这将只返回第一个子级的类值，而不是类值数组。
对每个元素使用一次单击处理程序怎么样

var boxes = 3;
var $boxes = $("#boxes");

$.each(new Array(boxes), function () {

    var box = $("<div/>").appendTo($boxes),
        editBox = $("<div/>").text("edit this box").appendTo(box),
        editBoxForm = $("<div/>").appendTo(editBox);

    editBox.click(function () {
        editBoxForm.html("hello");
    });

});

var框=3；
var$box=$（“#box”）；
$.each（新数组（框）、函数（）{
变量框=$（“”）。附加到（$框），
编辑框=$（“”）。文本（“编辑此框”）。附加到（框），
editBoxForm=$（“”）。附加到（editBox）；
编辑框。单击（函数（）{
html（“你好”）；
});
});

您的源代码中没有
editboxs
变量-您能提供一个JSFIDLE吗？是的，JSFIDLE将更容易理解您要做的事情
var boxes = 3;
var $boxes = $("#boxes");

$.each(new Array(boxes), function () {

    var box = $("<div/>").appendTo($boxes),
        editBox = $("<div/>").text("edit this box").appendTo(box),
        editBoxForm = $("<div/>").appendTo(editBox);

    editBox.click(function () {
        editBoxForm.html("hello");
    });

});