Add html content to js generated class

Question

I have a trivial issue and need your help. Thanks to you, I have 2690 squares generated by 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");
}

The code above generate 2690 of this:

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

And now, I need to add following html content to each .square class:

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

So in the result I need to have:

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

I tried .append, .addClass...but it doesn't work. Thank you in advance for your help!

Answer 1

Here is another solution:

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>');
}

If you want generate squares with Javascript, use this :

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));
}

You need to use cloneNode() method , which clones all attributes and values of specified element. A node can't be in two locations in the tree at once.

Here is a working solution: jsfiddle

Answer 2

Lukas. To achieve the function you were looking for using jQuery, I added an external resource:

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

and added this to the javascript:

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

I hope this helps.

Answer 3

You can append the html in pure javascript like this

 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;
    });

Working fiddle : https://fiddle.jshell.net/egxbhehu/

Answer 4

The append function should work.
Also, please note that <h1></h1> tag should be used only once per page. Consider using <span></span> and CSS to make it look like your current h1 tag.

Answer 5

You should use createDocumentFragment() to append multiple childs.

    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);
}