将 html 内容添加到生成的 js class

Question

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

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 class 添加以下 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

卢卡斯。为了使用 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 2

您可以像这样在纯 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;
    });

工作 fiddle：https://fiddle.jshell.net/egxbhehu/

Answer 3

这是另一个解决方案：

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 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 class

Add html content to js generated class

html

javascript

jquery

append

dynamically-generated