What is a best way to append a nested structure of html elements by jQuery?

Question

I need to append photos to my gallery. I want to make it by jQuery. I need to append to my gallery wrapper a structure of html tags like this:

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

Now i am using this code to append:

masonryWallWrapper.append('lalala');

but it is looks like bad idea. I have very big and unreadable string. Is there any better or best way?

possible duplicate of http://stackoverflow.com/questions/11173589/best-way-to-create-nested-html-elements-with-jquery — Learner, Jun 14 '14 at 19:33

score 1 · Answer 1 · answered Jun 14 '14 at 18:41

Instead of using an HTML string, I would clone() a template from the DOM and re-use it:

<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);
});

You might find this easier. Just my two cents.

What is a best way to append a nested structure of html elements by jQuery?

1 Answers1