Javascript HTML字符串 - 注入文档

时间:2016-09-27 12:16:45

标签: javascript jquery html dom

这是我的HTML:

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

这就是我正在做的事情:

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

这是我收到的:

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

有任何建议吗?

6 个答案:

答案 0 :(得分:8)

首先请注意,您无法将div附加到ul,因为它的HTML无效。 ul只能包含li个孩子。

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

&#13;
&#13;
var myString = '<li><a href="http://www.google.comp">Google</a></li><li>Something Else</li>';
$("#myUL").append(myString);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL"></ul>
&#13;
&#13;
&#13;

或者你可以忘记字符串:

&#13;
&#13;
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;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL"></ul>
&#13;
&#13;
&#13;

有关htmlDecode()功能的详情,请参阅this question

答案 1 :(得分:3)

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

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

与您的代码一起......

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

哪个应该有用。

答案 2 :(得分: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>

答案 3 :(得分:0)

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

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00



 #ff0074 for Pink
 #33ff0074 for Light pink

DEMO

答案 4 :(得分:0)

调用unescape函数来转换你的字符串

role_group_id   type_id map_id  path
1               1       1       A1
1               1       2       A2
1               1       3       A1.A3
1               1       4       A1.A3.A4
1               1       8       A1.A3.A4.A5
1               2       5       B1
1               2       6       B1.B2
1               2       7       B1.B2.B3
1               2       9       B4
2               1       3       A1.A3
2               2       6       B1.B2
2               2       7       B1.B2.B3
3               1       8       A1.A3.A4.A5
3               2       9       B4
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);

答案 5 :(得分:-1)

首先解码字符串:

&#13;
&#13;
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);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL">
</ul>
&#13;
&#13;
&#13;