Как добавить HTML-блок динамически на страницу?

Question

Мне нужно добавить такой блок.

<td valign="bottom" width="25%">
            <a href="/images/00000.jpg">
            <img width="150" height="100" src="http://farm4.static.flickr.com/3114/2524849923_1c191ef42e.jpg" border="0" alt="Click" title="Click"></a>
        </td>

Я пытаюсь что-то вроде. Но здесь к элементу td не добавляется элемент изображения.

 var img = document.createElement("img");
        img.src = src;
        img.width = width;
        img.height = height;
        img.alt = alt;
        img.onclick=function () { alert(src); }; 
        td=td.appendChild(img);
        alert(td);
        document.body.appendChild(td);

Answer 1

Это должно сработать (оно создает именно упомянутую структуру):

td = document.createElement('td');
td.valign = 'bottom';
td.width = '25%';
a = document.createElement('a');
a.href = '/images/00000.jpg';
img = document.createElement('img');
img.width = '150';
img.height = '100';
img.border = '0';
img.alt = img.title = 'Click';
img.src = 'http://farm4.static.flickr.com/3114/2524849923_1c191ef42e.jpg';
a.appendChild(img);
td.appendChild(a);
document.body.appendChild(td);

Демо: http://jsfiddle.net/TimWolla/PFVrG/

Answer 2

td=td.appendChild(img);

В этой строке вы устанавливаете td на результат операции appendChild (который будет изображением). Удалить td= часть:

td.appendChild(img);

Answer 3

Старый вопрос, но лучший ответ значительно проще, чем написано выше.

1. Создайте временный элемент:

    var el = document.createElement('img');
    el.id = 'tempID0';
   

2. Добавьте указанный элемент туда, куда хотите

    document.body.appendChild(el);
   

3. Измените externalHTML этого элемента большим блоком HTML

    document.getElementById('tempID0').outerHTML = '<td>.....</td>';
   

Answer 4

Если вы используете jquery, вы можете сделать что-то вроде этого:

$('<td>....</td>').appendTo('#parent');

Где #parent - идентификатор родительского тега / контейнера html. Есть также несколько других вариантов / методов, если вы не хотите, чтобы он был добавлен как последний дочерний элемент.