Creating a new DOM element from an HTML string using built-in DOM methods or Prototype

Question

I have an HTML string representing an element: '

text

'. I'd like to append it to an element in the DOM (a ul in my case). How can I do this with Prototype or with DOM methods?

(I know i could do this easily in jQuery, but unfortunately we're not using jQuery.)

user_45433 · Answer

Note: most current browsers support HTML

user_337221 · Answer

Use insertAdjacentHTML(). It works with all current browsers, even with IE11.

var mylist = document.getElementById('mylist');
mylist.insertAdjacentHTML('beforeend', 'third
');


 first
 second

user_1617686 · Answer

Why don't do with native js?

    var s="From Dan's Tools"
    var e=document.createElement('div')
    var r=document.createRange();
    r.selectNodeContents(e)
    var f=r.createContextualFragment(s);
    e.appendChild(f);
    e = e.firstElementChild;

user_8162002 · Answer

Answer

Create a Template
Set the Template's innerHTML to your string .trim()
Create an Array of Template's children
Return children, child, or

function toElement(s='',c,t=document.createElement('template'),l='length'){
t.innerHTML=s.trim();c=[...t.content.childNodes];return c[l]>1?c:c[0]||'';}



console.log(toElement());
console.log(toElement(''));
console.log(toElement('    '));
console.log(toElement('With td'));
console.log(toElement('With t'));
console.log(toElement('foobar'));
console.log(toElement('nested stuff
'));

Boro_13275 · Answer

Here's how to do it with PrototypeJS (as originally requested by the OP 12 years ago):

HTML:

JS:

$('mylist').insert('text');

Note that this is not jQuery!

Admin · Answer

HTML5 & ES6

user_12724482 · Answer

Fastest solution to render DOM from string:

let render = (relEl, tpl, parse = true) => {
  if (!relEl) return;
  const range = document.createRange();
  range.selectNode(relEl);
  const child = range.createContextualFragment(tpl);
  return parse ? relEl.appendChild(child) : {relEl, el};
};

And here u can check performance for DOM manipulation React vs native JS

Now u can simply use:

let element = render(document.body, `

  New DOM

`);

And of course in near future u use references from memory cause var "element" is your new created DOM in your document.

And remember "innerHTML=" is very slow :/

user_8390408 · Answer

I have searched a lot for this myself and came across this solution which is neat.

const stringToHTML = (str) => {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
};

String that I wanted to convert:

''

The result:

user_7320692 · Answer

Solution - works with all browsers since IE 4.0

var htmlString = `Hello World
`;
var tableString = `th cell
td cell`;


var doc = document.implementation.createHTMLDocument();
    doc.open();
    doc.write(htmlString);
    doc.getElementById('table').insertAdjacentHTML('beforeend', tableString);
    doc.close();

console.log(doc);

Or you can use DOMParser

var doc = (new DOMParser).parseFromString(htmlString, "text/html");
    doc.getElementById('table').insertAdjacentHTML('beforeend', tableString);

console.log(doc);

user_9935654 · Answer

I've linked from this article.^{( Converting HTML string into DOM elements? )}

For me, I want to find a way to convert a string into an HTML element. If you also have this need, you can try the following

const frag = document.createRange().createContextualFragment(
`js 
 go
`
) 
const aCollection = frag.querySelectorAll("a")
for (let [key, a] of Object.entries(aCollection)) {
  console.log(a.getAttribute("href"), a.textContent)
}

user_1269671 · Answer

Example with latest JS:

user_4647581 · Answer

Visit https://www.codegrepper.com/code-examples/javascript/convert+a+string+to+html+element+in+js

const stringToHtml = function (str) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
}

user_6449677 · Answer

Here is working code for me

I wanted to convert 'Text' string to HTML element

var diva = UWA.createElement('div');
diva.innerHTML = 'Text';
var aelement = diva.firstChild;

user_7374335 · Answer

var msg = "test" jQuery.parseHTML(msg)

user_934370 · Answer

This will work too:

$('').text('hello').appendTo('#mylist');

It feels more like a jquery way with the chained function calls.

Creating a new DOM element from an HTML string using built-in DOM methods or Prototype

29 Answers

Answer

HTML5 & ES6