【问题标题】:Appending HTML-encoded string as HTML, not as text将 HTML 编码的字符串附加为 HTML,而不是文本
【发布时间】:2012-01-16 06:21:43
【问题描述】:

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

<div> hello </div>

作为一个 HTML 节点,而不是附加 HTML,它只是附加文本:

<div> hello </div>

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

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

【问题讨论】:

标签: javascript jquery html append


【解决方案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 = "&lt;div&gt; hello &lt;/div&gt;";
    
    // 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(...))我认为对我的问题非常重要(在不编码的情况下附加到某些 &lt;pre&gt;&lt;code&gt;... 节点)。
    猜你喜欢
    • 1970-01-01
    • 2016-08-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-10
    • 1970-01-01
    • 2012-03-24
    • 2020-03-09
    相关资源
    最近更新 更多