How do I convert existing DOM element text to HTML element?

Question

I have an element that is already present on the page with HTML as a string. How can I take the text from that element and convert it into HTML and re-inject it back into the existing element?

Everything I try re-renders the elements innerhtml as text.

window.current_element_content=window.current_element.previousElementSibling.innerHTML;
window.current_element.previousElementSibling.getElementsByTagName('div').innerHTML = window.current_element_content;

Example of the text when printed on the console.

&lt;tr&gt;
        &lt;td headers="mon"&gt;
            9:00 AM - 4:00 PM
        &lt;/td&gt;
        &lt;td headers="tues"&gt;
            9:00 AM - 4:00 PM
        &lt;/td&gt;
        &lt;td headers="wed"&gt;
            9:00 AM - 4:00 PM
        &lt;/td&gt;
        &lt;td headers="thurs"&gt;
            9:00 AM - 4:00 PM
        &lt;/td&gt;
        &lt;td headers="fri"&gt;
            9:00 AM - 4:00 PM
        &lt;/td&gt;
        &lt;td headers="sat"&gt;
            Closed
        &lt;/td&gt;
        &lt;td headers="sun"&gt;
            Closed
        &lt;/td&gt;

Possible duplicate of [HTML Entity Decode](https://stackoverflow.com/questions/5796718/html-entity-decode) — Louys Patrice Bessette, May 27 '17 at 16:58
Possible duplicate of [Unescape HTML entities in Javascript?](https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript) — Mark Schultheiss, May 27 '17 at 17:12

Todor Simeonov · Answer 1 · 2017-05-27T17:10:41.060

You can see how to decode HTML entities from here: Unescape HTML entities in Javascript?

After that you can inject your code into a given element using .innerHTML property:

function htmlDecode(input){
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

$(document).ready(function(){
    var s = '&lt;input type=button value=&quot;Inserted Button&quot;&gt;';
    document.getElementById('my_place').innerHTML = htmlDecode(s);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="my_place">
&nbsp;
</div>

In the above code jQuery is used only to trigger on document.ready.

`document` is an object , not a tag – charlietfl May 27 '17 at 17:09 — charlietfl, May 27 '17 at 17:09

score 1 · Accepted Answer · answered May 27 '17 at 17:09

You need to read out the textContent instead of the innerHTML, and then write that to innerHTML like you had it:

var element = current_element.previousElementSibling.querySelector('div');
element.innerHTML = element.textContent;

Note also that getElementsByTagName returns a NodeList which does not have innerHTML. Instead use querySelector.

How do I convert existing DOM element text to HTML element?

2 Answers2