I'm looking for a method to insert a string, which contains HTML data, into a div element. The string is loaded via XHR, and there is no way of knowing what elements and such are in it.

I've searched around for a bit, and found some things that might help, but wouldn't completely work for me. What I need is something similar to the update() function from the Prototype framework:

The platform I'm writing for does not allow frameworks to be used, or JQuery. I'm stuck with Javascript. Anyone have any ideas?

I can't use innerHTML, as it does not apply any updates or functions or basically anything that's supposed to occur on load

I have some onload events that need to occur, and as best I know, using innerHTML does not execute onload events. Am I incorrect?

EDIT 2 years later: For anyone else reading, I had some serious misconceptions about the onload event. I expected that it was a valid event for any element, while it is only valid for the <body/> element. .innerHTML is the proper method to do what I was looking for, and any extra functionality for the elements added, needs to be done manually some other way.

I'm looking for a method to insert a string, which contains HTML data, into a div element. The string is loaded via XHR, and there is no way of knowing what elements and such are in it.

I've searched around for a bit, and found some things that might help, but wouldn't completely work for me. What I need is something similar to the update() function from the Prototype framework: http://prototypejs.org/api/element/update

The platform I'm writing for does not allow frameworks to be used, or JQuery. I'm stuck with Javascript. Anyone have any ideas?

I can't use innerHTML, as it does not apply any updates or functions or basically anything that's supposed to occur on load

I have some onload events that need to occur, and as best I know, using innerHTML does not execute onload events. Am I incorrect?

EDIT 2 years later: For anyone else reading, I had some serious misconceptions about the onload event. I expected that it was a valid event for any element, while it is only valid for the <body/> element. .innerHTML is the proper method to do what I was looking for, and any extra functionality for the elements added, needs to be done manually some other way.

• javascript
• dom
• xmlhttprequest
• element

Share Improve this question Follow edited Nov 10, 2014 at 6:33 Serge asked Jul 10, 2012 at 21:16 SergeSerge 2,07466 gold badges2525 silver badges3535 bronze badges 4

• 5 Search for "innerHMTL". There will be many examples and arguments for/against it. – user166390 Commented Jul 10, 2012 at 21:17
• I can't use innerHTML, as it does not apply any updates or functions or basically anything that's supposed to occur on load... – Serge Commented Jul 10, 2012 at 21:18
• 3 Explain your question better, everyone answered about innerHTML and I still think it solves your problem. – iurisilvio Commented Jul 10, 2012 at 21:21
• 1 @Serge I wrote an answer with document.createTextNode() which may be what you're looking for – cybertextron Commented Jul 10, 2012 at 21:22

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 9

HTMLElement innerHTML Property

The innerHTML property sets or returns the inner HTML of an element.

HTMLElementObject.innerHTML=text

Example: http://jsfiddle.net/xs4Yq/

You can do it in two ways:

var insertText = document.createTextNode(theText);
                 document.getElementById("#myid").appendChild(insertText);

or object.innerHTML=text

I'm looking for a method to insert a string, which contains HTML data, into a div element.

What you want to use is the innerHTML property.

Example of use:

<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = '<p>Universe</p>';
}
</script>
<p>Hello <b id='boldStuff'>World</b> </p> 
<input type='button' onclick='changeText()' value='Change Text'/>

do you mean like this? : http://jsfiddle.net/FgwWk/1 or do you have things in the div already before adding more?

Plain JS. Just use: element.insertAdjacentHTML(position, text);

position = "beforebegin" | "afterbegin" | "beforeend" | "afterend"

var text = '<a  class="btn btn-blue btn-floating waves-effect">\n' +
            '<i class="fas fa-user"><span class="badge badge-danger"></span></i>\n' +
            '</a>';
var inputPlace = document.getElementById("input-pace");

inputPlace.insertAdjacentHTML("beforeend", text);

One important advantage, that was not mentioned, that appendChild and insertAdjacentHTML have over insertHTML, is that they don't require the div element to be reparsed.

This is useful if the div already has other elements inside because, for example, if any of those elements have an event attached, they will lose it. Also, for this reason they are faster.