JavascriptをHTML文字列 - これは私が持っているHTMLで文書

Question

に注入：

<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

最初に、に無効なHTMLがあるため、divを追加できないことに注意してください。 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>

それとも、文字列のアンエスケープすることができます：htmlDecode()機能の詳細については、

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をあなたはプレーンな文字列を使用できます。

Answer 2

最初の文字列をデコード：

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>

Answer 3

あなたはまた、DOMパーサを通して、あなたのエスケープされた文字列を解析することができます：あなたのコードと一緒に

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 4

あなたはデータをデコードする簡単な関数を作成することができます - そして、あなたの文字列をアンエスケープする

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

コールアンエスケープ機能あなたのULリストにその値を代入

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

jQueryでデコードすることもできます。 .html()でエンコードされた文字列を追加すると、jQueryはそれをデコードします。その後、.text()でデコードされた結果を得ることができます。私たちは、* *その文字が何をしたいの正反対であるHTMLタグの開口部として解釈されるのを防ぐために `` <を使用

var myString = "<li><a href="www.google.comp">Google</a></li> <li>Something Else</li>" 
 
$("#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>