如何将此html转换为jquery？

Question

我想要做的仅仅是通过使用jquery添加所有这些html元素。

下面是在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> 

上面的代码，即时通讯使用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

声明并追加。

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

如果您想了解更多可控的单节点，你可以让他们一块一块：

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

或者，如果你不想在你的JavaScript所有的HTML标签，你也可以拥有一个模板在你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);