如何将动态内容添加到动态生成的 div 中？

Question

基本上我正在验证一个表单，我正在收集错误消息并将它们附加到动态生成的 div 中。现在我无法将这些消息附加到这个 div。这就是我所做的

//generates a div onclick of submit button
$("body").append("<div class='overlay'><div class='errorContainer'>.html(errorMsg)</div><div>`<a href='javascript:void(0);' class='cross'>X</a><div></div>");

.html(errorMsg)这会导致错误/不正确

function closeErrorBox() {
            var errorMsg = "";
                var ferrorMsg =  "Please say your first name" + "<br>";
                var aerrorMsg = "Please type address" + "<br>";
                var eerrorMsg = "Please type a valid email Address" + "<br>"
                if($("#name").val() == "") {
                    errorMsg += ferrorMsg;
                }
                if($("#address").val() == "") {
                    errorMsg += aerrorMsg;
                }
                if($("#email").val() == "") {
                    errorMsg += eerrorMsg;
                }

                $(".errorContainer").html(errorMsg);


                $(".overlay").remove();
                }

Answer 1

.errorContainer div 位于 .overlay div 内。当您在函数末尾删除覆盖时，errorContainer 也会被删除。除此之外，.html(errorMsg) 似乎工作正常（如果仍然导致错误，请说明发生了什么问题）。

重新阅读您的问题，我无法理解您的程序流程：您是否在已知错误时添加该 div，并在单击“X”时将其关闭？如果是这样的话，我建议做这样的事情：

var errorMsg = "";
var ferrorMsg =  "Please say your first name" + "<br>";
var aerrorMsg = "Please type address" + "<br>";
var eerrorMsg = "Please type a valid email Address" + "<br>"
if($("#name").val() == "") {
    errorMsg += ferrorMsg;
}
if($("#address").val() == "") {
    errorMsg += aerrorMsg;
}
if($("#email").val() == "") {
    errorMsg += eerrorMsg;
}

// Adapting Diego's answer:
$("<div class='overlay'><div class='errorContainer'></div><div><a href='javascript:void(0);' class='cross'>X</a><div></div>")
    .appendTo($("body"))
    .find(".errorContainer")
        .html(errorMsg)
        .end()
    .find(".cross")
        .click(function(e) {
            e.preventDefault();
            $(this).closest(".overlay").remove();
        });

Answer 2

我想你的意思是：

//generates a div onclick of submit button
$("body").append("<div class='overlay'><div class='errorContainer'></div><div><a href='javascript:void(0);' class='cross'>X</a><div></div>").find(".errorContainer").html(errorMsg);