使用javascript創建具有內容的許多div

Question

我正在嘗試學習javascript，並希望使用javascript創建類似於以下代碼的內容，然后我可以更改將在頁面上輕松創建的圖像/ div的數量。

<div class="row">
        <div class="column">
            <img src="images/img1low.JPG">
        </div>
        <div class="column">
            <img src="images/img2low.JPG">
        </div>
        <div class="column">
            <img src="images/img3low.JPG">
        </div>
        <div class="column">
            <img src="images/img4low.JPG">
        </div>
    </div>

編輯：我開始這樣的事情來嘗試創建div ..

for (var i = 0; i < 4; i++) {

    var temp = document.createElement("div");
    temp.className = "column";
    document.getElementById("temp").appendChild(temp);
}

Answer 1

有很多使用JavaScript添加HTML的方法。

您可以只使用innerHTML或insertAdjacentHTML插入HTML字符串：

document.body.innerHTML = '<div class="row"><div class="column">' +
                          '<img src="images/img1low.JPG">…</div></div>';

另一種方法是先使用createElement然后再使用appendChild ：

var row = document.createElement('div');
row.className = 'column';
var img = document.createElement('img');
img.src = 'images/img1low.JPG';
row.appendChild(img);
document.body.appendChild(row);

當然，每種可能性都有其利弊。 解析HTML字符串非常快，但是可以認為不是那么干凈。 創建和附加很多元素可能會用盡。 如果發生這種情況，可以使用<template>元素和importNode()方法放松：

<template id="div-column-template">
    <div class="column">
        <img src="">
    </div>
</template>

document.body.appendChild(
    document.importNode(
        document.getElementById('div-column-template').content,true)
); // don’t forget to set the src attribute first