如何动态地将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);

- Nishant

---

你是否使用 document.createElement("td") 创建了 td 元素？同时将 td 添加到 body 是无效的，应该将其添加到一个 tr 中（tr 在表格内）。 - bummzack

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

Demo: http://jsfiddle.net/TimWolla/PFVrG/

- TimWolla

Answer 2

td=td.appendChild(img);

在这一行中，你将 td 设置为 appendChild 操作的结果（即图像）。删除 td= 部分即可：

td.appendChild(img);

- David Hedlund

Answer 3

如果你正在使用 jQuery，你可以像这样做：

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

#parent 是父级 HTML 标签/容器的 ID。如果您不想将其附加为最后一个子元素，还有一些其他变体/方法可供选择。

- Andre van Heerwaarde

---

我们使用YUI，但看到使用JQUERY可以变得如此简单，这真是太好了。 - Nishant

Answer 4

虽然这是一个老问题，但最好的答案比上面写的要简单得多。

1. 创建一个临时元素：

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

2. 将该元素添加到您想要的位置

    document.body.appendChild(el);
   

3. 使用大块的HTML修改此元素的outerHTML

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

- Sandeep Shah