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结构，你可以使用'+'来加入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);

Answer 3

当您尝试附加html时，可以使用+这样的内容

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

如何将此html转换为jquery？

3 个答案: