一次添加兩個元素，一個在另一個裏面，到一個元素

我有一個代理應用程序從xml列表中檢索'src'屬性跨域。一次添加兩個元素，一個在另一個裏面，到一個元素

我想追加圖像全尺寸INSIDE的預先設定的div的，所以他們呈現在統一的大小，沒有拉伸。

我知道如何自己追加圖像，但我不知道如何創建div，將圖像追加到該元素，然後appendTo div與img到容器。

tl; dr; 現在我有這個

$("<img>").attr("src", stuff).attr('class','imgur').appendTo("#content");

生產這樣的：

<div id="content"> 
    <img /> 
    <img /> 
    <img /> 
    <img /> 
</div>

而且我想這一點：

<div id="content"> 
    <div class="window"><img /></div> 
    <div class="window"><img /></div> 
    <div class="window"><img /></div> 
    <div class="window"><img /></div> 
</div>

答案略作修改，以滿足我的使用情況：

function imgAdd(param) { 
    var content = document.getElementById("content"); 
    var img = new Image(); 
    img.src = param; 
    img.classList.add("imgur"); 
    var div = document.createElement("div"); 
    div.classList.add("window"); 
    div.appendChild(img); 
    content.appendChild(div); 
    }

正在被解僱：

HtmlPage.Window.Invoke("imgAdd", p.src); 
System.Threading.Thread.Sleep(20);

來源

2011-11-09 Wesley

var content = document.getElementById("content"); 
for (var i = 0; i < len; i++) { 
    var img = new Image(); 
    img.src = data[i].stuff; 
    img.classList.add("imgur"); 
    var div = document.createElement("div"); 
    div.classList.add("window"); 
    div.appendChild(img); 
    content.appendChild(div); 
}

可能需要classList shim或遺留平臺支持DOM shim。

如果你不想要classList填充，你可以直接操作.className。

.className = "string"或.className += " string"

來源

2011-11-09 19:03:04 Raynos

這效果最好。每20毫秒一次添加一個圖像，以便更好地呈現。我可以將它包含在一個函數中，該函數爲src提供一個字符串，並且每20毫秒調用一次，不包括循環。 – Wesley

請嘗試以下

var theDiv = $('<div></div>'); 
$('<img>').attr('src', stuff).attr('class', 'imgur').appendTo(theDiv); 
theDiv.appendTo('#content');

來源

2011-11-09 19:02:06 JaredPar

我會切換最後兩行，以便只發生一次迴流。 –

@RobW完成。「迴流」是否意味着限制HTML頁面執行佈局的次數？ – JaredPar

是的，的確如此。 –

$('#content').append('<div class="window"><img /></div>');

但是如果你只需要圖像具有粒度均勻，CSS是要走的路。

來源

2011-11-09 19:03:07 Shomz

但是，你有內聯的HTML，打破了關注的分離。這是一個不好的做法。 – Raynos

取決於他的需求，真的。他可以用src參數創建一個很好的小函數，並且可以改進代碼。我只是給了一個主意。你的代碼很適合用相同的src添加許多圖像，我懷疑他需要什麼。 – Shomz

一次添加兩個元素，一個在另一個裏面，到一個元素

回答

相關問題