Add HTML elements dynamically with JavaScript inside DIV with specific ID

Question

Ok, people, I need your help. I've found some code here on Stackoverflow (can't find that link) which generate HTML code dynamically via JS. Here is code:

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
      }
        return frag;
    }

    var fragment = create('<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>'); 

    document.body.insertBefore(fragment, document.body.childNodes[0]);

This code works just fine! But the generated code appears on top of page, right below body tag. I would like to generate that code inside empty div with specific id="generate-here".

So output will be:

<div id="generate-here">
    <!-- Here is generated content -->
</div>

I know that I can't see generated content with "view source". I only need to generate that content just in this particular place with #generate-here. I'm Javascript noob, so if anyone can just rearrange this code that will be perfect. Thanks a lot!

P.S. I know how to do this with Jquery, but I need native and pure JavaScript in this case.

You can view the actual html on the page with firebug: getfirebug.com — Gordon Gustafson
– Gordon Gustafson, Commented Aug 4, 2012 at 1:45
Thanks, I didn't know that :) But more important is to generate that code on that particular place. — Miljan Puzović
– Miljan Puzović, Commented Aug 4, 2012 at 1:46

Gordon Gustafson · Accepted Answer · 2012-08-04 02:00:13Z

24

All you need to do is change the last line. This will add the created element as the last child of the div:

document.getElementById("generate-here").appendChild(fragment);

This will add the created element as the first child of the div:

var generateHere = document.getElementById("generate-here");
generateHere.insertBefore(fragment, generateHere.firstChild);

You can also use innerHTML to just replace everything with new text (as you do in your create function). Obviously this one doesn't require you to keep the create function because you need an html string instead of a DOM object.

var generateHere = document.getElementById("generate-here");
generateHere.innerHTML = '<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>';

edited Aug 4, 2012 at 2:00

answered Aug 4, 2012 at 1:51

Gordon Gustafson

41.4k26 gold badges119 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Miljan Puzović Over a year ago

I don't know why, but that #generate-here is still empty. I've tried both codes, and it doesn't work :/

Gordon Gustafson Over a year ago

@MiljanPuzović did you keep all your other code the same and just change the last line? I edited to clarify. :)

Miljan Puzović Over a year ago

Yes, i've just changed the last line :) And that didn't work. I'll try now with innerHTML.

Gordon Gustafson Over a year ago

Interesting, they all work for me in this example. Just comment out the one you want to try; I listed all three. jsfiddle.net/XydQ9

Miljan Puzović Over a year ago

I don't see even from example that is working :/ See picture i.imgur.com/mke2H.jpg I'm using Chrome, maybe is some bug in Chrome.... No, i've looked also from Firefox, same problem.

|

Nathan Tuggy · Accepted Answer · 2017-08-10 06:05:07Z

0

Step 1. Let's create a function to return us an ordered HTML listview. Note we are passing in an array of data:

function createListView(spacecrafts){
    var listView=document.createElement('ol');
    for(var i=0;i<spacecrafts.length;i++)
    {
        var listViewItem=document.createElement('li');
        listViewItem.appendChild(document.createTextNode(spacecrafts[i]));
        listView.appendChild(listViewItem);
    }
    return listView;
}

Step 2. Then let's display our listview in your div:

document.getElementById("displaySectionID").appendChild(createListView(myArr));

edited Aug 10, 2017 at 6:05

Nathan Tuggy

2,23727 gold badges33 silver badges38 bronze badges

answered Aug 10, 2017 at 5:41

Oclemy

212 bronze badges

Comments

PythonProgrammi · Accepted Answer · 2021-12-05 19:52:39Z

0

this is my solution example

function divHTML(img, d1, r1, r2){
    const newDiv = document.createElement("div");
    const newContent = `
    <img src="`+img+`" width=50%>
    <h1 style="color:white">`+d1+`</h1>
    <button onclick="dom1.value='A'">A</button><i>`+r1+`</i><br>
    <button onclick="dom1.value='B'">B</button><i>`+r2+`</i><br>
    <input id="dom1" type="text"><hr>
    `;
    newDiv.innerHTML = newContent;
    const currentDiv = document.getElementById("div1");
    document.body.insertBefore(newDiv, currentDiv);
}

divHTML("https://images-cdn.kahoot.it/decf7162-f24b-464b-b2e7-2cca47ae0b42?auto=webp", "qual è la scrittura giusta?", "opzione 1", "opzione 2"
    );

answered Dec 5, 2021 at 19:52

PythonProgrammi

23.6k3 gold badges44 silver badges35 bronze badges

Collectives™ on Stack Overflow

Add HTML elements dynamically with JavaScript inside DIV with specific ID

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related