How to insert elements into html document from string?

If the text in local storage is HTML, you can insert it at the beginning of, at the end of, in front of, or after any other existing element by using insertAdjacentHTML. For example, to add to the document using the HTML in html inside the document body at the end:

document.body.insertAdjacentHTML("beforeend", html);

Example:

const html = "<p>This is a new paragraph with <em>emphasized</em> text.</p>";
document.body.insertAdjacentHTML("beforeend", html);

<p>This paragraph is already on the page.</p>

You can also use the innerHTML property of an existing element if you want to completely remove that element's current contents and replace them with what's defined in the HTML string:

someElement.innerHTML = html;

Example:

const html = "This is the new content for the paragraph, with <em>emphasized</em> text.";
document.getElementById("existing-paragraph").innerHTML = html;

<p id="existing-paragraph">This paragraph is already on the page.</p>

If it's not HTML, you can put it in an element (such as a p or div) and append that somewhere via appendChild or insertBefore, e.g.:

const p = document.createElement("p");
p.textContent = text;
document.body.appendChild(p);

Example:

const text = "This is plain text, so things like <this> don't get misinterpreted as HTML.";
const p = document.createElement("p");
p.textContent = text;
document.body.appendChild(p);

Or just append it as raw text using createTextNode:

const textNode = document.createTextNode(text);
document.body.appendChild(textNode);

Example:

const text = "This is plain text, so things like <this> don't get misinterpreted as HTML.";
const textNode = document.createTextNode(text);
document.body.appendChild(textNode);

There's lots more to explore on MDN.

In the comments we've figured out that the text in local storage has already been HTML-encoded, like this:

<p>Testing <em> one two three</em></p>

That means that whatever code put the text in local storage encoded it before doing that (because local storage doesn't do that; it faithfully stores and returns the exact string you give it). The best solution is probably to update that code so that it doesn't do that.

If you can't update that code, you can interpret that text as HTML, you just have to do it twice: Once to interpret the < and such so they're < again, then again to insert and parse the resulting HTML. The easy way to do that is to create an element (a div for instance), set its innerHTML, and then read its textContent. Here's an example:

Example:

const textFromLocalStorage = "<p>Testing <em> one two three</em></p>";
const div = document.createElement("div");
div.innerHTML = textFromLocalStorage;
const decodedHtml = div.textContent;
document.body.insertAdjacentHTML("beforeend", decodedHtml);

<p>This paragraph is already on the page.</p>

the arguments of appendChild are html elements. When you send to this a string, it converts to textnode. You need to use innerHTML method

may be that ?

const DomParser = new DOMParser();
let data = localStorage.getItem("data");
let frag = DomParser.parseFromString( data, 'text/html').body.firstChild
document.body.appendChild(frag);

expecting data is only 1 html element (it can have many html sub elements)

sample code

const DomParser = new DOMParser();
let data = '<p>Test</p>' // eq: localStorage.getItem("data");
let frag = DomParser.parseFromString( data, 'text/html').body.firstChild;
document.body.appendChild(frag);
 

p {
  font-size: 30px;
  color: red;
}