Insert HTML as a String, without JQuery

Question

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.

Search for "innerHMTL". There will be many examples and arguments for/against it. — user166390
– 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
– Serge, Commented Jul 10, 2012 at 21:18
Explain your question better, everyone answered about innerHTML and I still think it solves your problem. — iurisilvio
– iurisilvio, Commented Jul 10, 2012 at 21:21
@Serge I wrote an answer with document.createTextNode() which may be what you're looking for — cybertextron
– cybertextron, Commented Jul 10, 2012 at 21:22

Wolfram · Accepted Answer · 2012-07-11 01:23:55Z

9

HTMLElement innerHTML Property

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

HTMLElementObject.innerHTML=text

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

edited Jul 11, 2012 at 1:23

Wolfram

8,0973 gold badges49 silver badges69 bronze badges

answered Jul 10, 2012 at 21:18

CD..

74.4k25 gold badges160 silver badges170 bronze badges

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

Comments

cybertextron · Accepted Answer · 2012-07-10 21:19:47Z

4

You can do it in two ways:

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

or object.innerHTML=text

answered Jul 10, 2012 at 21:19

cybertextron

11k32 gold badges117 silver badges220 bronze badges

Comments

jeff · Accepted Answer · 2012-07-10 21:34:26Z

3

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

edited Jul 10, 2012 at 21:34

answered Jul 10, 2012 at 21:19

jeff

8,3582 gold badges34 silver badges43 bronze badges

Comments

AddiktedDesign · Accepted Answer · 2012-07-10 21:24:15Z

1

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

answered Jul 10, 2012 at 21:24

AddiktedDesign

5122 silver badges16 bronze badges

Comments

Andrzej Krawczuk · Accepted Answer · 2020-03-18 15:50:52Z

1

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

answered Mar 18, 2020 at 15:50

Andrzej Krawczuk

4094 silver badges5 bronze badges

Comments

ms-afk · Accepted Answer · 2023-06-02 20:36:08Z

0

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.

edited Jun 2, 2023 at 20:36

answered Jun 1, 2023 at 21:36

ms-afk

791 gold badge2 silver badges7 bronze badges

2 Comments

Producdevity Over a year ago

This is a great addition, but not an answer to the question. Maybe better as a comment, imo

ms-afk Over a year ago

@y-gherbi I know, I thought about that, but I can't comment because I'm new and I don't have enough reputation. So I thought that this was better than nothing.

Collectives™ on Stack Overflow

Insert HTML as a String, without JQuery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related