【问题标题】:How to create text node using jQuery?如何使用 jQuery 创建文本节点?
【发布时间】:2014-04-11 23:55:14
【问题描述】:

创建新文本节点并将其附加到 DOM 的最佳方法是什么?

我目前正在使用这个:

$('#someDiv').append(document.createTextNode('Some text'));

但这是最好的方法吗?还有其他选择吗?

更新

检查 jQuery 代码后,我发现我的变体可能是最好的...

这是.text()函数在jQuery中的实现方式:

text: function( value ) {
    return jQuery.access( this, function( value ) {
        return value === undefined ?
            jQuery.text( this ) :
            this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
    }, null, value, arguments.length );
},

所以,.text()函数调用.createTextNode()方法,所以如果你想节省调用额外的操作,最好使用直接文本的节点.append()

【问题讨论】:

标签: javascript jquery dom


【解决方案1】:

就像使用.text()一样简单

$("#output").text("Hello, World!");

【讨论】:

  • 为什么你认为它比我的例子更好?
  • 为了紧凑和方便,这很好,为了提高效率,请使用@AlexWheat的方法。
  • 此技术还将破坏#output 节点的现有内容(也称为子节点)。
【解决方案2】:

我想这就是你要找的东西

删除<div>中的所有文本

$('#someDiv').html("Some Text");

添加文本

$('#someDiv').append("Some Text");

添加...

$('#someDiv').prepend("Some Text");

编辑

使用此字符串“某些文本”,.html() 和 .text() 将呈现相同的内容。

.text() 不会转义特殊字符

$('#someDiv').text("<b>Hello</b>");
==> <b>Hello</b>

.html() 将

$('#someDiv').html("<b>Hello</b>");

==> 你好

【讨论】:

  • 不会转义像&amp;&lt;这样的字符。
  • 如果文本更好地使用 .text(),为什么要使用 .html()?
  • "jQuery.html() 将字符串视为 HTML,jQuery.text() 将内容视为文本。"来源:stackoverflow.com/questions/1910794/…
  • 我知道 html() 和 text() 之间有什么区别 :),我的意思是我不需要 HTML...关于纯文本的问题...我通常更喜欢构建HTML 使用 .appent()、.appentTo() 等
  • 不,问题是是否有更好的方法将文本节点添加到 DOM。并且使用 .text() 不是更好......它更简单,但不是更好......
【解决方案3】:

像这样:

var yourtext = 'Some text';
$('#someDiv').append(yourtext);

【讨论】:

  • .append() 将参数作为 HTML 处理,因此不会转义 &amp;&lt; 等字符。
  • 正如其他一些人在 cmets 中所说的那样,他没有提及转义内容,只是将文本“附加”到 DOM。但是谢谢你的注意。
  • 附加文本与附加原始 HTML 代码不同。你和亚历克斯的例子效果很好,但在一般情况下你不能说同样的话。
  • 危险的答案。在实际应用中,yourtext 可能来自数据库或 HTML 表单提交,而不是常量字符串。如果你只使用 .append(),你就是在乞求 HTML 注入攻击。永远不要养成这种习惯,即使您从安全的字符串常量开始,因为下一个编码员可能会用其他东西替换常量,而不知道您在渲染它时没有费心转义该值。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2010-11-30
  • 2010-09-22
  • 1970-01-01
  • 2021-07-22
  • 1970-01-01
相关资源
最近更新 更多