How do i convert this html into jquery?

Question

What I want to do is simply, adding all of these html elements by using jquery.

Here's the code for the html, I'm using ejs as the templating engine

example.ejs

<div class="row" id="searchTest">
      <div class="col-md-3" id="searchColumn">
        <a href="/product/<%= products[i]._id %>">
          <div class="thumbnail">
            <img src="<%= products[i].image %>" alt="...">
            <div class="caption">
              <h3><%= products[i].name %></h3>
              <p><%= products[i].description %></p>
              <p>$ <%= products[i].price %></p>
              <p><%= products[i].category.name %></p>
            </div>
          </div>
        </a>
      </div>
    </div>

Above code is, Im using ejs to render the data from the server, and Im using AJAX call to append it to the row class

How do I convert the above code to jquery?, assume that the data has been received and the name is data

example.js

$('#searchTest').append('<div></div>').addClass('col-md-3')
            .append('<a href=' + data._source._id + '</a>')
            .append('img src=' + data._source.image + '')

I only tried halfway because I'm really confused on how to do it.

Answer 1

Declare and append.

var html = "";
html += '<div class="col-md-3">';
html += '<a href="' + data._source._id + '"></a>';
html += '<img src="' + data._source.image + '">';
html += '</div>';
$('.anyelement').append(html);

Answer 2

If you want a clear way to see the html structure, you could use '+' to join the html strings.

var html = '<div class="col-md-3" id="searchColumn">' +
               '<a href="/product/' + data._source._id+ '">' +
                   '<div class="thumbnail">' + 
                       '<img src="' +data._source.image + '" alt="...">' +
                       '<div class="caption">' +
                           '<h3>' +data._source.name+ '</h3>' +
                           '<p>' + data._source.price + '</p>' +
                           '<p>' + data._source.category.name + '</p>' +
                       '</div>' +
                   '</div>' +
               '</a>' +
           '</div>'
;
$('#searchTest').append(html);

If you want more controlable of single nodes, you can make them piece by piece:

$caption = $('<div class="caption">');
$caption.append($('<h3>').text(data._source.name))
        .append($('<p>').text(data._source.price))
        .append($('<p>').text(data._source.category.name));
$img = $('<img>');
$link = $('<a>');

$link.append($img).append($caption);
....
$wrapper = $('<div class="col-md-3" id="searchColumn">');
$wrapper.append($link);

$('#searchTest').append($wrapper);

Or, if you don't want any html tag in your javascript, you can also have a template in you html

<div class="col-md-3" class="searchColumnPrototype" style="display:none;">
    <a>
      <div class="thumbnail">
        <img />
        <div class="caption">
          <h3></h3>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </div>
    </a>
  </div>

Then in javascript

var $html = $('.searchColumnPrototype').clone();
$html.find('img').attr('src', data._source.image);
....
$html.show();
$('#searchTest').append($html);

Answer 3

when you try to append html you can use + something like this

$('#searchTest').append('<div class="col-md-3">'+
                            '<a href="' + data._source._id + '"></a>'+
                            '<img src="' + data._source.image + '">'+
                        '</div>';
                        );