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 = "    &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?

We use < to prevent that character being interpreted as the opening of an HTML tag, which is the exact opposite of what you want; simply use the characters, for example, < rather than encoding them. — David Thomas
– David Thomas, Commented Sep 27, 2016 at 12:19

Community · Accepted Answer · 2017-05-23 12:33:14Z

8

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.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Sep 27, 2016 at 12:19

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ilmari Karonen Over a year ago

To be clear, you most certainly can append a div into a ul, in the sense that, invalid or not, pretty much every browser will let you do it (and will even render the result more or less consistently). The fact that you can do it in practice, however, doesn't mean you should.

Rory McCrossan Over a year ago

@IlmariKaronen it won't throw an error but the browser won't let you do it. If you check in the DOM inspector the div will be placed outside of the ul

Ilmari Karonen Over a year ago

@RoryMcCrossan: Strange, that's not what I observe. (And yes, both Firefox and Chrome behave the same way. Unfortunately I don't have IE / Edge available to test with.)

Chris J · Accepted Answer · 2016-09-27 12:22:19Z

3

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.

answered Sep 27, 2016 at 12:22

Chris J

1,44711 silver badges22 bronze badges

Comments

Mohammad · Accepted Answer · 2016-09-27 12:32:56Z

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 = "&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>

edited Sep 27, 2016 at 12:32

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

answered Sep 27, 2016 at 12:28

Brett Henderson

3,9061 gold badge16 silver badges7 bronze badges

Comments

baao · Accepted Answer · 2016-09-27 12:23:25Z

0

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

answered Sep 27, 2016 at 12:23

baao

73.5k18 gold badges152 silver badges208 bronze badges

1 Comment

Chris J Over a year ago

Not at all secure for untrusted string sources, though.

Rohman HM · Accepted Answer · 2016-09-27 12:26:42Z

0

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>

answered Sep 27, 2016 at 12:26

Rohman HM

2,8673 gold badges30 silver badges41 bronze badges

Comments

sideroxylon · Accepted Answer · 2016-09-27 12:21:14Z

-1

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>

answered Sep 27, 2016 at 12:21

sideroxylon

4,4261 gold badge25 silver badges42 bronze badges

2 Comments

Rory McCrossan Over a year ago

The string is HTML encoded, not URL encoded so decodeURIComponent won't work.

Rory McCrossan Over a year ago

It isn't...? The HTML is printed to the screen, not interpreted

Collectives™ on Stack Overflow

Javascript HTML string - inject into document

6 Answers 6

3 Comments

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related