jQuery创建并添加多个元素

Question

我创建了两个div，Div1（freeze）和Div2（parent），再次创建3个div（loading，header，msg）并将其附加到Div2（parent）。所有div都在body标签中。以下是我的代码，我认为还有其他更好的方法来实现这一点。

    var freeze = $('<div/>',{
        "class" : "freeze"
    });
    var parent = $('<div/>',{
        "class":"parent"
    });

    var loading = $('<div/>',{
        "class":"loadimg"
    }).appendTo(parent);

    var header = $('<div/>',{
        "class":"header"
    }).appendTo(parent);
    var msg = $('<div/>',{
        "class":"msg"
    }).appendTo(parent);

    $('body').append(freeze,parent);

- prakashstar42

Answer 1

既然问题是关于使用jQuery创建和同时添加多个对象，那么这里有一种方法：

$('body').append([
    $('<div/>',{ "class": "freeze" }),
    $('<div/>',{ "class": "parent" }).append([
        $('<div/>',{ "class": "loadimg" }),
        $('<div/>',{ "class": "header" }),
        $('<div/>',{ "class": "msg" })
    ]);
]);

在某些情况下，使用结构化数据比使用原始标记更可靠、更方便。

- aleha

Answer 2

使用jQuery来完成大部分工作是不必要的，只会使代码变得比必要的更长。由于所有内容都是固定的，您可以创建一个HTML字符串并将其附加到body中。

如果您想要稍后使用jQuery引用其中的某些部分，那么只需使用.find()稍后查找它们即可。

例如，您可以这样做：

var html = '<div class="freeze"></div>' + 
           '<div class="parent">' + 
               '<div class="loadimg"></div>' +
               '<div class="header"></div>' +
               '<div class="msg"></div>' +
           '</div>';
$(document.body).append(html);

---

为了以后的参考，您可以这样做：

var header = $(document.body).find(".header");

- jfriend00

---

请记住不要在您的 HTML 字符串中使用用户输入变量，因为它可能被用于 XSS 攻击。为了防止这种情况，请使用 aleha 的答案。 - shaedrich

仅因问题中没有提到某事，并不意味着搜索这个问题的人可能没有完全相同的用例。在我看来，当他们改编那个例子时，他们应该知道这一点。我并不想以任何方式批评你，只是作为向其他人提供信息的方式。 - shaedrich

@shaedrich - 此处代码中没有注入任何外部内容，因为所有东西都是由服务器定义的常量，因此无法进行XSS攻击。因此，与您引用的Aleha答案一样，此解决方案对XSS攻击具有零漏洞。编写此解决方案是因为OP要求比他们使用的基于jQuery的解决方案更简单。如果存在外部内容，则显然必须小心处理，同时Aleha的答案也必须小心处理。 - jfriend00

Answer 3

jQuery方法往往采用装饰器模式，这意味着您可以嵌套调用：

el = $('<div>').addClass('parent')
       .append(
         $('<div>').addClass('loadimg')
       );

在这个例子中，您将一个子div添加到某个父div中。您可以在此处使用更多的.append，并使用addClass、attr和许多其他jQuery方法进行装饰。

jQuery的开发人员已经完成了实现装饰器模式的艰苦工作，现在是时候尊重他们的努力并开始使用它了。

- romaroma

---

我不明白这怎么是装饰器模式？ - ICW

这是流畅接口模式。 - jox

Answer 4

请在您的HTML字符串的前后使用反引号符号"`"，这被称为模板文字，现在您可以在多行中编写纯HTML并将其分配给变量。

示例>> var htmlString =

`

你的

HTML

`

- DamnScandalous