通过jQuery追加嵌套的html元素结构的最佳方法是什么？

Question

我需要将照片添加到我的画廊。我想通过jQuery来实现它。我需要在我的gallery包装器中添加一个html标签结构，如下所示：

                <article>
                  <div class="masonry-wall-brick-wrapper">
                    <figure>
                      <a>
                        <img />
                      </a>
                      <figcaption>Photo name</figcaption>
                    </figure>
                  </div>
                </article>

现在我正在使用此代码追加：

masonryWallWrapper.append('lalala');

但这看起来不错。我的字符串非常大且不可读。有没有更好或更好的方式？

Answer 1

我不是使用HTML字符串，而是clone()来自DOM的模板并重新使用它：

<article class="template">
  <div class="masonry-wall-brick-wrapper">
    <figure>
      <a>
        <img />
      </a>
      <figcaption class="photoname">Photo name</figcaption>
    </figure>
  </div>
</article>

$(function(){
    var $article = $('article.template').clone().removeClass('template');
    $article.find('.photoname').text('something');
    masonryWallWrapper.append($article);
});

您可能会发现这更容易。只是我的两分钱。