CODEWITHSUNDEEP
jquery
Sri Ram
Sri Ram

Reputation: 123

Jquery append - Opening and closing a tag

I have a jquery block like this. After the html is rendered i see that the <article> tag opens and closes immediately, same way, <div class=bar> opens and closes immediately. Am i doing anything wrong in his piece of code. Any better way to implement this one?

Thanks

$.each(filterresult.result, function(index, value) {
                              $('#newslist')
                              .append('<article class="preview">')
                              .append('<div class="bar">')
                              .append('<span class="left"><small>').append(value.dTime)
                              .append('</small></span><span class="right text-sm gray-text">')
                              .append(value.author)
                              .append('</span></div>').append('<h3 class="tighter"><a class="black" href="#">')
                              .append(value.title)
                              .append('</a></h3')
                              .append('<div class="media-block medium"><figure><span class="box blue">Products & Services</span><img src="http://placeholder.levelfivesolutions.net/140x105.png" alt="" title="" /></figure>')
                              .append('<div class="details">')
                              .append(value.teaser)
                              .append('<div class="bar"><span class="left"><a class="blue" href="#"><span class="gray-text">&raquo;</span> Read More</a></span><span class="right text-sm"><a class="comment-icon" href="#">12 Comments</a></span></div>')
                              .append('</div>')
                              .append('</div>')
                              .append('</article>');    
                    });

Upvotes: 3

Views: 5276

Answers (3)

jah
jah

Reputation: 1305

Instead of appending each line you could store it in a variable like below, and append it all together:

content = '';

content += '<article class="preview">';
content += '<div class="bar">';
content += '<span class="left"><small>'+value.dTime+'</small></span>';

And so on.

And then append content in the end. Just put it into your function.

Upvotes: 2

Ethan Hayon
Ethan Hayon

Reputation: 346

Jquery's append function takes a DOM node, HTML string, or javascript object as input. So when you call your first append, there is no closing tag for the article, so it builds it into a complete DOM node by adding the closing tag for you. Then, when you go to append your next item, it actually appends completely after the previous DOM node (after the closing tag).

Instead, I recommend you build the HTML string first, then append it all at once.

For example, you should do the following:

var html = "<article class='preview'><div class='bar'><span class='left'><small>........";
$("#newlist").append(html);

Of course, there are better ways of doing this, such as using a templating engine such as Mustache.JS, but this should at least get it working for you.

Hope this helps

Upvotes: 5

benestar
benestar

Reputation: 562

If you want that all elements are in the article tag, you should write:

.append(
   $( '<article class="preview"> )
   .append( ... )
)

Upvotes: -1

Related Questions