javascript - 无法附加一堆 Html

Question

我在附加大量 html 时遇到问题。

这是我的:

$("#popup1").click(function(){
        $(".cd-popup-container").append("<p>Are you sure you want to decline this employement request?</p>");
        $(".cd-popup-container").append("<form id='accept_employe' action='/accept_employe' method='post' accept-charset='utf-8'>");
        $(".cd-popup-container").append("<ul class='cd-buttons no_margin'>");
        $(".cd-popup-container").append("<li><a class='submit'>Yes</a></li>");
        $(".cd-popup-container").append("<li><a class='popup-close'>No</a></li>");
        $(".cd-popup-container").append("</ul>");
        $(".cd-popup-container").append("</form>");
        $(".cd-popup-container").append("<a class=cd-popup-close popup-close img-replace>Close</a>");
    });

很明显，许多追加将不起作用，因为它只会得到第一个。但是，当我将它们全部放在同一行时，它也不起作用。

我怎样才能清楚地将所有这些 html 附加到 .cd-popup-container 中？

Answer 1

是的，您绝对可以(而且应该)让它更干净、更易于维护。例如，使用字符串数组并通过空字符串连接:

$("#popup1").click(function() {
    var html = [
        "<p>Are you sure you want to decline this employement request?</p>",
        "<form id='accept_employe' action='/accept_employe' method='post' accept-charset='utf-8'>",
            "<ul class='cd-buttons no_margin'>",
                "<li><a class='submit'>Yes</a></li>",
                "<li><a class='popup-close'>No</a></li>",
            "</ul>",
        "</form>",
        "<a class=cd-popup-close popup-close img-replace>Close</a>"
    ].join('');
    $(".cd-popup-container").append(html);
});

当然，采用我发布的方法或更传统的字符串连接方法并不重要——重要的部分是您不会执行许多重复的 DOM 追加，而是将它们组合在一起散装。