将 HTML 编码的字符串附加为 HTML，而不是文本

Posted 2023-03-11

【中文标题】将 HTML 编码的字符串附加为 HTML，而不是文本

【英文标题】：Appending HTML-encoded string as HTML, not as text

【发布时间】：2012-01-16 06:21:43

【问题描述】：

我正在尝试附加此字符串：

<div> hello </div>

作为一个 html 节点，而不是附加 HTML，它只是附加文本：

<div> hello </div>

如何让 jQuery 将其附加为 HTML 节点，而不仅仅是文本？

如果可能的话，我想要一个既适用于嵌套 div 又适用于文本的解决方案。

【问题讨论】：

你用的是什么代码？

那是因为它必须是 hello 看看***.com/questions/1912501/…

【参考方案1】：

您可以使用.createElement('div') 创建一个新的 div。然后只需更改新元素的 HTML。

$(document.createElement('div').html('<p>All new content.</p>'));

要将新元素附加到 DOM，请使用 element.append() 或 .appendTo(element) 附加到您选择的元素。

【参考方案2】：

// This is your string :)
var myString = "<div> hello </div>";

// This is a way to "htmlDecode" your string... see link below for details.    
myString = $("<div />").html(myString).text();

// This is appending the html code to your div (which you don't have an ID for :P)
$("#TheDivIWantToChange").append(myString);

HTML-encoding lost when attribute read from input field

【讨论】：

如果在外部 div 中存在复杂的嵌套 div 而不仅仅是文本“hello”会怎样？

有没有办法将新的 html 注册为 jquery 节点，以便可以这样引用它（如 $('#newDiv' )？

谢谢！！那救了我！顺便说一句，我曾经在 jquery cleditor premiumsoftware.net/cleditor

中动态附加文本

【参考方案3】：

也许这有点冗长，但这通常是我处理此类事情的方式：

var div = $(document.createElement("div"));

div.text(" hello "); //Or div.html(" hello ") if need be...

$("#divtoappendto").append(div);

【讨论】：

奇怪的是，这个答案帮助我找到了我需要的东西，尽管它可能不是这个特定问题的非常正确的答案，来自谷歌搜索。 x.text(...) 和 x.html('...') 的区别（其中 x.append('...') 编码类似于 html(...)）我认为对我的问题非常重要（在不编码的情况下附加到某些 <pre><code>... 节点）。