Question

我使用以下命令在JavaScript中使用jQuery创建对象：

var article_attrs = { 
        'class' : 'class-name',
        click : function_name,
        hover : function_name,
        html : $('<h2>', { html : "Heading" })
    },
    article = $('<article>', atricle_attrs);

这很有效 - 通过设置html属性，我设置了文章的内容。

此时我想要做的是添加<h2>标记和包含<div>标记的<footer>标记。我对这个元素的概述如下：

文章
- H2
- DIV
  - 页脚

这样做的最佳方法是什么？（注意这只是一个例子）。

更新：主要问题是，使用html属性，如何添加多个元素？

我尝试过similar question的方法，但在这种情况下不起作用：

html : [ $('<h2>', { html : "Heading" }), $('<div>', { html : "Some content" }) ]

我已经使这个fiddle有效..但我的JS仍然没有。我肯定错过了一些东西。

编辑：适用于jQuery 1.8。*仅

Answer 1

你可以简单地这样写

$('<h2></h2><div><footer></footer></div>').appendTo(article)

Answer 2

var $myEle = $("<article />").append(
                 $("<h2 />").text("...")
             ).append(
                 $("<div />").append(
                     $("<footer />")
                 )
             );

您可以嵌套上面的jQuery .append()方法调用来创建所需的HTML结构。我喜欢这种方法，因为它可以很容易地看到HTMl结构在阅读时的内容。

以上代码将呈现此HTML：

<article>
    <h2>...</h2>
    <div>
        <footer></footer>
    </div>
</article>

使用jQuery构建具有嵌套内容的元素

2 个答案: