Javascript HTML字符串 - 注入文档

Question

这是我的HTML：

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

这就是我正在做的事情：

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);

这是我收到的：

<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>

这是我想要接受的：

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

有什么建议吗？

Answer 1

首先请注意，您不能将div附加到ul因为它是无效的HTML。 ul只能包含li作为孩子。

问题本身是因为您的字符串包含转义的HTML。 您可以使用纯字符串：

 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> 

或者你可以解开字符串：

 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> 

有关htmlDecode()函数的更多信息，请参阅此问题 。

Answer 2

您还可以通过DOM Parser解析转义的字符串：

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

与你的代码一起......

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);

哪个应该有效。

Answer 3

你也可以让jQuery为你解码它。 使用.html()添加编码字符串将强制jQuery对其进行解码。 然后，您可以使用.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

您可以创建一个解码数据的简单函数 - 然后将该值分配给ul列表

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

调用unescape函数来取消你的字符串

 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

首先解码字符串：

 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>