Javascript HTML字符串 - 注入文档

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

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>