создать динамически таблицу и добавить изображение

Question

Я пытаюсь создать таблицу из 3 карт, например XXXI, не могу добавлять строки или столбцы, все должны быть динамически, чтобы тело было пустым:

<script>
    var $card = $('<div />').appendTo('body');
    var $table = document.createElement("table");
    var $image = document.createElement("IMG");
    $('#table').find('body').append("<tr>");
    $('#table').find('body').append("<td>" + $image.src + "</td>");
    $('#table').find('body').append("<td>" + $image.src + "</td>");
    $('#table').find('body').append("<td>" + $image.src + "</td>");
    $('#card').html($table);
    $card.append($table);
    for (var i = 0; i < 3; i++) {
        $image.src = "/images/ACE.jpg";
        $('#card').html($image);
        $card.append($image);
    }
</script>

Answer 1

Вы создаете недопустимый HTML.Также вы смешиваете неполный код JavaScript с jQuery.Добавьте таблицу в body, затем добавьте строку tr в таблицу, затем добавьте три ячейки td в строку.Ваши изображения должны идти в клетки.Вот простой код для этого:

var img = '<img src="/images/ACE.jpg" />';
var table = $('<table id="table1"></table>').appendTo('body');
table.append("<tr></tr>");
table.find('tr').append("<td>" + img + "</td>"
                      + "<td>" + img + "</td>"
                      + "<td>" + img + "</td>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Если вы собираетесь генерировать элементы в DOM, вы должны добавить их к элементу, от которого они ожидаются.Это основной пример создания элементов и добавления их к родителю.Надеемся, это даст вам представление о том, как может работать ваша логика.

var $body = $(document.body);

//make a table
var $table = $('<table>');
//make a row
var $row = $('<tr>');
//make a column
var $col = $('<td>');
//put something in the column
$col.append('Hey there!');
//put the column in the row
$row.append($col);
//put the row in the table
$table.append($row);
//put the table in the body
$body.append($table);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Или вы можете сначала создать разметку в виде строки, прежде чем добавлять ее.

var $body = $(document.body);
var html = '';

//make a table
html += '<table>';
//make a row
html += '<tr>';
//make a column
html += '<td>';
//put something in the column
html += 'Hey there!';
//close the column
html += '</td>';
//close the row
html += '</tr>';
//close the table
html += '</table>';
//put the table in the body
$body.append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>