在这种情况下如何修复自动关闭 div 标签答案

【问题标题】：How to fix automatically closing div tag in this case在这种情况下如何修复自动关闭 div 标签
【发布时间】：2013-05-19 07:15:09
【问题描述】：

我有一个关于通过 jquery 将数据附加到我的 html 中的 div 的问题。

这是我的 html 文件中的内容：

<div class="container">
        <div class="row">
            <div class="span12">
                <div class="row">
                    <div id="errors" class="text-error"></div>
                </div>
            </div>
        </div>
</div>

这是我的 javascript 文件：

function checkCompletion(data){

    // IMPORTANT VALUES
    var app_important = ["submit_description", "app_icon", "address", "email"];
    var event_important = ["name", "datefrom", "dateto", "description", "email"];

    $("#errors").append("<div class='span6'><div class='well'>");

    // LOOPS + HEADERS
    $("#errors").append("<h3>App</h3>");
    doLoop(data.app, app_important);

    $("#errors").append("<h3>Events</h3>");
    doLoop(data.events, event_important);
}

// ar           => app data array
// ar_important => important props app (array)
function doLoop(ar, ar_important) {
    $.each(ar, function(value) {
        $.each(ar_important, function(i) {
            if(ar[value][ar_important[i]] == '') $("#errors").append("<p>" + ar_important[i]+" is missing</p>");
            //else $("#errors").append("<p> :) "+ar_important[i]+"</p>");
        });
    });
    $("#errors").append("</div></div>");
}

data 参数是一个包含大量数据的 JSON 对象。
如您所见，我做$("#errors").append("<div class='span6'><div class='well'>");

但是 div 标签会自动关闭，所以我的错误不在其中。
有谁知道我该如何解决这个问题并且仍然可以使用 append？

尼尔斯

【问题讨论】：

append() 没有将 HTML 编辑为文本，它会将节点插入 DOM。这应该清楚为什么你正在做的事情不起作用。
DOM 不是字符串。

标签： javascript jquery html tags append

【解决方案1】：

您不需要像这样构建字符串。您已经在大部分代码中构建了 DOM 节点。

您需要做的就是直接附加到这些节点。只需修复 <div> 元素的创建，然后附加到最里面，我认为这就是您所追求的。

function checkCompletion(data){

    var app_important = ["submit_description", "app_icon", "address", "email"];
    var event_important = ["name", "datefrom", "dateto", "description", "email"];

// make the outer `span6`
    var span6 = $("<div class='span6'></div>")

// make the inner `well`, and append it to the span6
    var well = $("<div class='well'></div>").appendTo(span6);

// do all your appends to the `well` element, 
//    passing it to `doLoop` so it can do the same
    well.append("<h3>App</h3>");
    doLoop(data.app, app_important, well);

    well.append("<h3>Events</h3>");
    doLoop(data.events, event_important, well);
}

function doLoop(ar, ar_important, well) {
    $.each(ar, function(value) {
        $.each(ar_important, function(i) {
           if(ar[value][ar_important[i]] == ''){
               well.append("<p>" + ar_important[i]+" is missing</p>");
           }
           //else{ errorAppend += "<p> :) "+ar_important[i]+"</p>";
        });
    });

  // append the outer `span6` to `#errors`
    $("#errors").append(span6);
}

还有更简洁的方法来创建元素。这是相同的代码，但有更好的方法。

function checkCompletion(data){

    var app_important = ["submit_description", "app_icon", "address", "email"];
    var event_important = ["name", "datefrom", "dateto", "description", "email"];

// make the outer `span6`
    var span6 = $("<div/>", {"class":"span6"})

// make the inner `well`, and append it to the span6
    var well = $("<div/>", {"class":"well"}).appendTo(span6);

// do all your appends to the `well` element, 
//    passing it to `doLoop` so it can do the same
    $("<h3/>", {text: "App"}).appendTo(well);
    doLoop(data.app, app_important, well);

    $("<h3/>", {text: "Events"}).appendTo(well);
    doLoop(data.events, event_important, well);
}

function doLoop(ar, ar_important, well) {
    $.each(ar, function(value) {
        $.each(ar_important, function(i) {
           if(ar[value][ar_important[i]] == ''){
               $("<p/>", {text: ar_important[i]+" is missing"}).appendTo(well);
           }
           //else{ errorAppend += "<p> :) "+ar_important[i]+"</p>";
        });
    });

  // append the outer `span6` to `#errors`
    $("#errors").append(span6);
}

【讨论】：