Question

我展示的两个“东西”应该是彼此相邻的，这就是我想要这个代码的原因：

<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

我被困在哪里是如何通过附加来实现这一点，到目前为止我有这个，但它不起作用：

tddiv = $("<td/>")
    .appendTo(trdiv);

trdiv = $("<tr/>")
    .appendTo(tablediv);

tablediv = $("<table/>")
    .appendTo(contentdiv);

contentdiv = $("<div/>") 
    .attr("data-role", "content") 
    .appendTo(pagediv);

$("<img/>")
    .addClass("artistimg")
    .attr("src", "http://images.q-music.be/" + oTrack.artist.photo)
    .appendTo(tddiv);

$("<h2/>")
    .text(oTrack.artist.name)
    .appendTo(tddiv);

Answer 1

您的问题是当您尝试追加时，trdiv，contentdiv和tablediv不存在。此外，您需要将代码包装在DOMReady函数中（例如$(function() { });或$(document).ready(function() { });）：

contentdiv = $('<div/>').data('role', 'content').appendTo(pagediv);
tablediv = $('<table/>').appendTo(contentdiv);
trdiv = $('<tr/>').appendTo(tablediv);
tddiv = $('<td/>').appendTo(trdiv);


$('<img/>').addClass('artistimg').prop('src', 'http://images.q-music.be/' + oTrack.artist.photo).appendTo(tddiv);

$('<h2/>').text(oTrack.artist.name).appendTo(tddiv);

另请注意使用data()和prop()替换attr('data-*')和attr()。

如果此处使用<table>元素的唯一原因是造型，不要！现在是2014年，所以你应该使用CSS来实现这一目标。表应该用于表示表格数据，而不是两列中的样式信息。你可以通过一些简单的标记和CSS轻松实现你想要做的事情，如下所示：

<强> HTML：

<div class="row">
    <div class="cell fifty"></div>
    <div class="cell fifty"></div>
</div>

<强> CSS：

.row {
    float: left;
    width: 100%;
}

    .row .cell {
        float: left;
        padding: 10px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
        .cell.fifty {
             width: 50%;
        }

jsFiddle Demo

Answer 2

您尝试在创建它们之前将每个元素附加到其父元素。在以下示例中：

tddiv = $("<td/>")
    .appendTo(trdiv);

trdiv = $("<tr/>")
    .appendTo(tablediv);

trdiv首先在第2行提到，但它只在第4行创建。更简单（并且计算成本更低）的方法是简单地将整个事物写成一个HTML字符串：< / p>

var contentdiv = $( '\
<div data-role="content">\
  <table>\
    <tbody>\
      <tr>\
        <td>\
          <img class="artistimg" src="http://images.q-music.be/' + oTrack.artist.photo +  '">\
          <h2>' + oTrack.artist.name + '</h2>\
');

将html元素附加到表中

2 个答案: