如何動態地將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塊添加到頁面中？

回答

相關問題