Insert HTML as string, no JQuery

Question

Insert HTML as string, no JQuery

I am looking for a way to insert a string containing HTML data into a div element. The string is loaded via XHR and there is no way to know which items, etc. In it.

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

The platform I'm writing to doesn't allow using frameworks or JQuery. I am stuck with Javascript. Does anyone have any idea?

I can’t use innerHTML as it doesn’t apply any updates or features or anything at all that should have happened on load

I have several events onload

that need to happen and as far as I know, using innerHTML does not execute onload events. Am I wrong?

EDIT 2 years later: For everyone who read, I had some serious misconceptions regarding the event onload

. I expected this to be a valid case for any element, whereas it is only valid for an element <body/>

. .innerHTML

is the correct way to do what I was looking for and any additional functionality for the added elements needs to be done manually in a different way.

-1

javascript dom xmlhttprequest element

Serge 10 jul. 12 at 21:16

source to share

4 answers

You can do this in two ways:

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

or object.innerHTML=text

+2

cybertextron 10 jul. 12 at 21:19

source to share

I am looking for a way to insert a string containing HTML data into a div element.

What you want to use is the innerHTML property .

Usage example:

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