Как преобразовать этот html в jquery?

Question

Что я хочу сделать, просто добавив все эти элементы html с помощью jquery.

Вот код HTML, я использую ejs в качестве шаблонного движка

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> 

Выше кода, Im использованием EJS для отображения данных с сервера, и Им с помощью AJAX вызова, чтобы добавить его к row class

Как преобразовать приведенный выше код JQuery ?, предположим, что данные были получены и имя data

example.js

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

Я только попробовал на полпути, потому что я действительно путают о том, как это сделать.

Answer 1

Declare и добавить.

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

при попытке добавить HTML вы можете использовать + что-то вроде этого

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

Answer 3

Если вы хотите четкий путь, чтобы увидеть HTML структуру, вы можете использовать «+», чтобы присоединиться к HTML строки.

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

Если вы хотите больше controlable отдельных узлов, вы можете сделать их по кусочкам:

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

Или, если вы не хотите какой-либо тег HTML в вашем JavaScript, вы можете также иметь шаблон в 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> 

Затем в JavaScript

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