CODEWITHSUNDEEP
javascriptjqueryhtmldom
Skylerdw
Skylerdw

Reputation: 357

Javascript HTML string - inject into document

This is the HTML I have:

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

This is what I'm doing:

var myString = "    &lt;li&gt;&lt;a href=&quot;www.google.comp&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;Something Else&lt;/li&gt;"

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?

Upvotes: 3

Views: 262

Answers (6)

Brett Henderson
Brett Henderson

Reputation: 3896

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 = "&lt;li&gt;&lt;a href=&quot;www.google.comp&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;Something Else&lt;/li&gt;"
$("#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>

Upvotes: 3

Rohman HM
Rohman HM

Reputation: 2837

call unescape function to unescape your string

var myString = "&lt;li&gt;&lt;a href=&quot;www.google.comp&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;Something Else&lt;/li&gt;"

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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

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 = "&lt;li&gt;&lt;a href=&quot;www.google.comp&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;Something Else&lt;/li&gt;"
$("#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.

Upvotes: 8

baao
baao

Reputation: 73281

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 = "    &lt;li&gt;&lt;a href=&quot;www.google.comp&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;Something Else&lt;/li&gt;"

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

DEMO

Upvotes: 0

Chris J
Chris J

Reputation: 1447

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 = "    &lt;li&gt;&lt;a href=&quot;www.google.comp&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;Something Else&lt;/li&gt;"

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

Which should work.

Upvotes: 3

sideroxylon
sideroxylon

Reputation: 4416

Decode the string first:

var myString = "    &lt;li&gt;&lt;a href=&quot;www.google.comp&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;Something Else&lt;/li&gt;"

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>

Upvotes: -1

Related Questions