Question

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

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>

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

<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

Answer 2

卢卡斯。为了实现您正在寻找使用jQuery的功能，我添加了一个外部资源：

https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js

并将其添加到javascript：

$( ".square" ).append("<div class=\"hover\"><a href=\"#\">Click Me</a></div>")

我希望这会有所帮助。

Answer 3

你可以在这样的纯JavaScript中附加html

 var squares = document.getElementsByClassName("square");
    var str = '<div class="hover"><a href="#">Click Me</a> </div>';
    Array.prototype.forEach.call(squares, function(sqr, index) 
    {
         sqr.innerHTML = sqr.innerHTML + str;
    });

工作小提琴：https://fiddle.jshell.net/egxbhehu/

Answer 4

追加功能应该有效。
另请注意，<h1></h1>标记每页只能使用一次。考虑使用<span></span>和CSS使其看起来像您当前的h1标签。

Answer 5

您应该使用createDocumentFragment（）附加多个子项。

    var i, square, text, hoverDiv, aHref, container = document.getElementById("square_container");
for (i = 1; i <= 4; 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;
    hoverDiv = document.createElement("div");
    hoverDiv.classList.add("hover");
    aHref = document.createElement("a");
    aHref.href = "#";
    aHref.innerHTML = "Click Me";
    hoverDiv.appendChild(aHref);
    var docFrag = document.createDocumentFragment();
    docFrag.appendChild(text);
    docFrag.appendChild(hoverDiv);
    square.appendChild(docFrag);
    container.appendChild(square);
}

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

5 个答案: