如何动态地将HTML块添加到页面中？

我需要添加一个这样的块。如何动态地将HTML块添加到页面中？

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

来源

2012-01-22 Nishant

你是否用'document.createElement（“td”）'创建'td'元素？此外，将“td”添加到主体是无效的。您应该将其添加到“tr”（位于表格内）。 – bummzack

这应该工作了（它创建完全相同提到的结构）：

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/

来源

2012-01-22 10:43:36 TimWolla

完美。那正是我正在寻找的。它运行良好 – Nishant

如果您正在使用jQuery你可以做这样的事情：

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

其中#parent是父html标记/容器的标识。如果你不想把它作为最后一个子元素追加，也有一些变体/方法。

来源

2012-01-22 11:13:43

我们使用YUI，但很高兴看到它可以与JQUERY一起使用。 – Nishant

td=td.appendChild(img);

在这行你设置td到appendChild操作的结果（这将是图像）。删除td=部分：

td.appendChild(img);

来源

2012-01-22 11:16:44

老问题，但最好的答案是不是发生了什么上面写的相当容易。

创建一个临时的元素：

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

追加所述项目的，无论你想
```
document.body.appendChild(el); 
```

修改该元素的outerHTML与HTML

的大块

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

来源

2014-04-08 18:54:20

如何动态地将HTML块添加到页面中？

回答

相关问题