创建多个元素

Question

JavaScript

var textBlock = document.createElement('div');
textBlock.setAttribute('class', 'finalBlock');

var addFinalBlock = document.getElementsByClassName('block')[0];
addFinalBlock.appendChild(textBlock);

textBlock.innerHTML = "Make this block a text block";

// -------
var textBlock2 = document.createElement('div');
textBlock2.setAttribute('class', 'finalBlock');

var addFinalBlock2 = document.getElementsByClassName('block')[0];
addFinalBlock2.appendChild(textBlock2);

textBlock2.innerHTML = "Make this block a text block2";

// -------
var textBlock3 = document.createElement('div');
textBlock3.setAttribute('class', 'finalBlock');

var addFinalBlock3 = document.getElementsByClassName('block')[0];
addFinalBlock3.appendChild(textBlock3);

textBlock3.innerHTML = "Make this block a text block3";

// -------
var textBlock4 = document.createElement('div');
textBlock4.setAttribute('class', 'finalBlock');

var addFinalBlock4 = document.getElementsByClassName('block')[0];
addFinalBlock4.appendChild(textBlock4);

textBlock4.innerHTML = "Make this block a text block4";

我想创建4个带有不同文本的元素。类需要保持不变。我认为我使用了太多代码。

也许有人可以提供一些信息，如何让这段代码更美观、更有效率?

最好的祝愿和感谢！

- xoomer

Answer 1

如果你要重复进行相同的操作，可以使用循环。将不同的文本存储在一个数组中，并使用forEach遍历：

var text = ["text1", "tex2", "text3", "text4"];
text.forEach(function(el) {
    var div = document.createElement("div");
    div.className = "finalBlock";
    div.innerHTML = el;
    document.body.appendChild(div);
});

或者使用for循环：

var text = ["text1", "tex2", "text3", "text4"];
for(var i = 0; i < text.length; i += 1) {
    var div = document.createElement("div");
    div.className = "finalBlock";
    div.innerHTML = text[i];
    document.body.appendChild(div);
}

演示

- user3589620

Answer 2

我认为更好的方法是只使用 fragment 一次更新 DOM。

var docFrag = document.createDocumentFragment();

for(var i = 0; i < divs.length; i++) {
  docFrag.appendChild(divs[i]); // Note that this does NOT go to the DOM
} 
document.body.appendChild(docFrag); // Appends all divs at once

- Eyal Ofri

Answer 3

您可以使用 Array.prototype.map() 方法。它类似于 .forEach()，但您可以返回结果。

const textblocks = ["textblock 1", "textblock 2", "textblock 3", "textblock 4"].map(text => {
    let div = document.createElement("div"); // p tag might be better suited for textblocks
    div.classList.add("finalBlock");
    div.textContent = text; // for text only, use textContent
    return div;
});
document.body.append(...textblocks); // append all in one function call

- User

Answer 4

这段代码将正常工作。如果您想在同一个HTML标签上添加多个元素。

            var element1=  "<br/>"
            var element2="<input type='text' />"
            var element3= "<br/>"
            var onLine = document.getElementById("onLine"); /* This is <ul id="onLine"></ul> */
            var on = document.createElement("div");

            on.innerHTML = element1+ element3+ element3

            on.setAttribute("style", "background-color:rgba(0, 0, 
            0, 0.3);color:white;border-radius:40px;margin- 
            bottom:30px;padding: 10px;width: 230px;");

            on.appendChild(document.createTextNode('Custom text'));

            onLine.appendChild(on);

- Rohit Parte

Answer 5

如果存在父子关系，插入多个元素的最有效方法是使用文本作为模板：

const el = document.createElement('div');

el.innerHTML = `
<div class="final-block">Block One</div>
<div class="final-block">Block Two</div>
<div class="final-block">Block Three</div>
<div class="final-block">Block Four</div>
`;

// Then insert wherever you want
document.querySelector('#app').appendChild(el);

这比迭代更快，更易于理解。

如果您需要从数组中生成这些子元素：

const el = document.createElement('ul');
el.innerHTML = ['One', 'Two', 'Three'].reduce((a, c) => a + `<li>${c}</li>`, '');

- snnsnn

Answer 6

你可以创建一个for循环来创建多个元素。

let elementsCount = 3;
for (let i = 0; i < elementsCount; i++) {
     const element = document.createElement('div');
     document.body.appendChild(element);
}

- MD SHAYON

Answer 7

我想展示另一种选项，供任何人参考。 与其他选项的不同之处在于利用map()、cloneNode()、textContent（而不是innerHTML）和扩展运算符将节点数组附加到块div上。

    const div = document.createElement("div");
    const blockData = [
        {
            "blockclass":"finalBlock",
            "text":"text1"
        },
        {
            "blockclass":"finalBlock",
            "text":"text2"
        },
        {
            "blockclass":"finalBlock",
            "text":"text3"
        },
        {
            "blockclass":"finalBlock",
            "text":"text4"
        }
    ];
    let blockdiv;
    const textBlocks = blockData.map(obj => {
        blockdiv = div.cloneNode(false);
        blockdiv.className = obj.blockclass;
        blockdiv.textContent = obj.text;
        return blockdiv;
    });

document.querySelector(".block").append(...textBlocks);

- Funk Doc