добавляющие HTML элементов в таблицу

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

Вы пытаетесь добавить каждый элемент к своему родительскому объекту, прежде чем создавать его. В следующем примере:

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

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

trdiv впервые упоминается в строке 2, но это только создано в строке 4. Намного проще (и вычислительно дешевле) способ сделать это было бы просто написать все это, как одна строка HTML:

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

Answer 2

Ваша проблема заключается в том, что 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