javascript - 将html内容添加到js生成的类中

Question

我有一个小问题需要你的帮助。谢谢你，我有 2690 个由 js 生成的方 block :

var i, square, text, container = document.getElementById("square_container");
for (i = 1; i <= 2690; i += 1) {
    square = document.createElement("div");
    square.id = "square" + i;
    square.classList.add("square");
    text = document.createElement("h1");
    text.innerHTML = i;
    text.id = "text" + i;
    square.appendChild(text);
    container.appendChild(square);
    text.classList.add("hover");
}

上面的代码生成 2690 个:

<div id="square1" class="square"><h1 id="text1">1</h1></div>

现在，我需要将以下 html 内容添加到每个 .square 类中:

<div class="hover"><a href="#">Click Me</a></div>

所以在结果中我需要:

<div id="square1" class="square"><h1 id="text1">1</h1>

<div class="hover"><a href="#">Click Me</a>

</div>
</div>

https://fiddle.jshell.net/tynw5c34/3/

我尝试了.append、.addClass...但它不起作用。预先感谢您的帮助!

Answer 1

这是另一种解决方案:

for (i = 1; i <= 2690; i += 1) {
    square = document.createElement("div");
    square.id = "square" + i;
    square.classList.add("square");
    text = document.createElement("h1");
    text.innerHTML = i;
    text.id = "text" + i;
    square.appendChild(text);
    container.appendChild(square);
    $('#square'+i).append('<div class="hover"><a href="#">Click Me</a></div>');
}

如果你想用 Javascript 生成正方形，请使用这个:

var i, square, text, container = document.getElementById("square_container");
var content = document.createElement('div');
content.className = 'hover';
var a=document.createElement('a');
a.href='#';
a.innerHTML='Click Me';
content.appendChild(a);
for (i = 1; i <= 2690; i += 1) {
    square = document.createElement("div");
    square.id = "square" + i;
    square.classList.add("square");
    text = document.createElement("h1");
    text.innerHTML = i;
    text.id = "text" + i;
    square.appendChild(text);
    container.appendChild(square);
    document.getElementById('square'+i).appendChild(content.cloneNode(true));
}

您需要使用cloneNode()方法，该方法克隆指定元素的所有属性和值。一个节点不能同时位于树中的两个位置。

这是一个可行的解决方案:jsfiddle