javascript 如何使用 jQuery 附加/前置/创建文本节点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7619739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to append/prepend/create a text node with jQuery
提问by Niko
Possible Duplicate:
Escaping text with jQuery append?
可能的重复：
使用 jQuery 附加转义文本？
My HTML is somewhat like this:
我的 HTML 有点像这样：
<div id="selector">Hello World</div>
Now I'd like to append some text to this div. I know that I could simply use
现在我想在这个 div 中附加一些文本。我知道我可以简单地使用
$('#selector').append(text);
but this wouldn't escape any special characters in text. Another way is to wrap the text in a span:
但这不会转义text. 另一种方法是将文本包装在一个跨度中：
$('#selector').append( $('<span>').text(text) );
But this is ugly, because it creates unnecessary markup. So my current solution is to manually create a TextNode:
但这很丑陋，因为它创建了不必要的标记。所以我目前的解决方案是手动创建一个TextNode：
$('#selector').append( document.createTextNode(text) );
I was wondering whether there is any jQuery-styleway to do this?
我想知道是否有任何jQuery 风格的方式来做到这一点？
回答by lonesomeday
The createTextNodeapproach is probably the best way to go. If you want to have a jQuery-ish syntax, you could make a plugin.
这种createTextNode方法可能是最好的方法。如果你想要一个 jQuery-ish 语法，你可以制作一个插件。
$.fn.appendText = function(text) {
return this.each(function() {
var textNode = document.createTextNode(text);
$(this).append(textNode);
});
};
回答by Andreas
$.text()accepts also a function as parameter. This function will receive an index and the current text. The return value of the function will be set as the new text.
$.text()也接受一个函数作为参数。此函数将接收索引和当前文本。函数的返回值将被设置为新文本。
.text( function )function
Type:Function( Integer index, String text ) => String
A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.
.text( function )函数
类型：Function( Integer index, String text ) => String
返回要设置的文本内容的函数。接收集合中元素的索引位置和旧文本值作为参数。
$("li").text(function(idx, txt) {
return txt + " <item>";
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>回答by Tebo
You can use;
您可以使用;
$.extend({
urlEncode: function(value) {
var encodedValue = encodeURIComponent(value);
encodedValue = encodedValue.replace("+", "%2B");
encodedValue = encodedValue.replace("/", "%2F");
return encodedValue;
},
urlDecode: function(value) {
var decodedValue = decodeURIComponent(value);
decodedValue = decodedValue.replace("%2B", "+");
decodedValue = decodedValue.replace("%2F", "/");
return decodedValue;
}
});
to escape HTML characters before you append to the DOM.
在附加到 DOM 之前转义 HTML 字符。
Use it like; $.urlEncode(value)
使用它喜欢; $.urlEncode(value)
Using it; $('#selector').append($.urlEncode(text));
使用它; $('#selector').append($.urlEncode(text));
Update #1
更新 #1
You could this $('#selector').html($('#selector').html() + text);
你可以这样 $('#selector').html($('#selector').html() + text);
I suspected this was what you wanted.
我怀疑这就是你想要的。
