如何动态地将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. 使用大块HTML修改此元素的outerHTML

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

Answer 4

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

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

其中#parent是父html标记/容器的id。 如果您不希望将其作为最后一个子元素附加，还有一些更改的变体/方法。