Javascript: string to HTML

Question

Given a string like that:

<img src="image.png" /><p>some text</p>

How can I append it to a dom node without using jQuery?

I can create something like that:

  var string = '<img src="image.png" /><p>some text</p>';
  var div = document.createElement('div');
  div.innerHTML = string;

and then append it to a node using appendChild, but how can I add only the original string without the wrapping div?

Something like jquery's parseHTML, I need something that parses a string and return it as html nodes.

Teemu · Accepted Answer · 2013-03-29 18:22:06Z

6

You can use insertAdjacentHTML() for this task.

EDIT

If you need to parse a string to elements, you can do something like this:

function parseElements(str) {
    var temp = document.createElement('div'),
        nodes, n,
        elements = [];
    temp.innerHTML = str;
    nodes = temp.childNodes;
    for (n = 0; n < nodes.length; n++) {
        elements.push(nodes[n]);
    }
    return elements;
}

edited Mar 29, 2013 at 18:22

answered Mar 29, 2013 at 17:35

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

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

3 Comments

Matteo Pagliazzi Over a year ago

sorry I didn't explained it too well, I'd like to have something that return html nodes, something like jquery's parseHTML

Teemu Over a year ago

Well, jQuery seems to create a documentFragment and elements (from the string) into it, then it merges the results to a resulting jQuery object.

Matteo Pagliazzi Over a year ago

and how do they put elements from the string into the fragment? they takes div's child nodes?

Collectives™ on Stack Overflow

Javascript: string to HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related