Javascript HTML 字符串 - 注入(inject)文档

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 作为 child 。

问题本身是因为您的字符串包含转义的 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>

参见 this question有关 htmlDecode() 函数的更多信息。