Converting HTML String into Dom Elements

var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";var doc = new DOMParser().parseFromString(xmlString, "text/xml");console.log(doc.firstChild.innerHTML); // => <a href="#">Link...console.log(doc.firstChild.firstChild.innerHTML); // => Link

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

Note: most current browsers support HTML <template> elements, which provide a more reliable way of turning creating elements from strings. See Mark Amery's answer below for details.

For older browsers, and node/jsdom: (which doesn't yet support <template> elements at the time of writing), use the following method. It's the same thing the libraries use to do to get DOM elements from an HTML string (with some extra work for IE to work around bugs with its implementation of innerHTML):

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes.
  return div.firstChild;
}

Note that unlike HTML templates this won't work for some elements that cannot legally be children of a <div>, such as <td>s.

If you're already using a library, I would recommend you stick to the library-approved method of creating elements from HTML strings:

• Prototype has this feature built-into its update() method.
• jQuery has it implemented in its jQuery(html) and jQuery.parseHTML methods.

Converting an HTML string to a DOM element?

Create a temporary container for your HTML, then gets its content. Something like:

var d = document.createElement('div');
d.innerHTML = some_html;
return d.firstChild;

JavaScript convert string into HTML element

Use the innerHTML property of an element.

E.g.

let element = document.getElementById('myElement');

element.innerHTML = "<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>"

Convert a string of HTML into DOM objects with jQuery

Take simple nested example.

var dom_string = '<div>xxx<div>yyy</div></div>';

create HTML DOM elements using $() function of jquery and append wherever you want.
i have taken 'body' but you can append anywhere.

$(dom_string).appendTo('body');

Alternatively you can implement this with pure javascript:

var dom_target = document.getElementById("target");
dom_target.innerHTML = dom_string;

Custom pipe not converting string into Dom Element

You can use innerHtml instead of a pipe.

Try this:

<div [innerHtml]="tag"></div>

Working Demo

Parse HTML String to DOM and convert it back to string

DOMParser will always give you a document in return. Documents don't have an innerHTML property, but the document.documentElement does, just like in a page's normal document object:

const myHtmlString = '<p><span class="text">Hello World!</span></p>'const htmlDom = new DOMParser().parseFromString(myHtmlString, 'text/html');console.log(htmlDom.documentElement.innerHTML);

response = response.replace (/</ig, '<').replace (/>/ig, '>');