Javascript HTML string - inject into document

Question

This is the HTML I have:

 <ul id="myUL">
</ul>

This is what I'm doing:

var myString = "    <li><a href="www.google.comp">Google</a></li>    <li>Something Else</li>"

var div = document.createElement('div');
div.innerHTML = myString;
$("#myUL").append(div.innerHTML);

This is what I recieve:

<ul id="myUL" >
   &lt;li&gt;&lt;a href="www.google.com"&gt;Google&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;Something Else&lt;/li&gt;
</ul>

This is what I want to recieve:

<ul id="myUL">
   <li>
    <a href="www.google.com">Google</a>
  </li>    
  <li>
    Something Else
  </li> 
</ul>

Any advices?

Answer 1

Firstly note that you can't append a div to a ul as it's invalid HTML. ul can only contain li as children.

The issue itself is because your string contains escaped HTML. You can either use a plain string:

var myString = '<li><a href="http://www.google.comp">Google</a></li><li>Something Else</li>';
$("#myUL").append(myString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL"></ul>

Or you can unescape the string:

var myString = "<li><a href="www.google.comp">Google</a></li>    <li>Something Else</li>"
$("#myUL").append(htmlDecode(myString));

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL"></ul>

See this question for more information on the htmlDecode() function.

Answer 2

You could also parse your escaped string through DOM Parser:

function unescapeHTML(input)
{
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

in conjunction with your code...

var myString = "    <li><a href="www.google.comp">Google</a></li>    <li>Something Else</li>"

var div = document.createElement('div');
div.innerHTML = unescapeHTML(myString);
$("#myUL").append(div.innerHTML);

Which should work.

Answer 3

You can also let jQuery decode it for you. Adding the encoded string with .html() will force jQuery to decode it. Then you can get the decoded result with .text().

var myString = "<li><a href="www.google.comp">Google</a></li>    <li>Something Else</li>"
$("#myUL").html($("<div/>").html(myString).text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL"></ul>

Answer 4

You can create a simple function that decodes the data - then assign that value to your ul list

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

var myString = "    <li><a href="www.google.comp">Google</a></li>    <li>Something Else</li>"

document.getElementById('myUL').innerHTML = decodeEncodedHtmlString(myString);

DEMO

Answer 5

call unescape function to unescape your string

var myString = "<li><a href="www.google.comp">Google</a></li>    <li>Something Else</li>"

var div = document.createElement('div');
div.innerHTML = unescape(myString);
$("#myUL").append(div.innerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL">
</ul>

Answer 6

Decode the string first:

var myString = "    <li><a href="www.google.comp">Google</a></li>    <li>Something Else</li>"

var div = document.createElement('div');
div.innerHTML = decodeURIComponent(myString);
$("#myUL").append(div.innerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL">
</ul>