如何附加/添加/創建使用jQuery

可能重複文本節點：
Escaping text with jQuery append?如何附加/添加/創建使用jQuery

我的HTML是有點像這樣：

<div id="selector">Hello World</div>

現在的我我喜歡附加一些文本到這個div。我知道，我可以簡單地使用

$('#selector').append(text);

，但這不會在text逃避任何特殊字符。另一種方法是將文本換成一個範圍：

$('#selector').append($('<span>').text(text));

但是這很醜陋，因爲它會產生不必要的標記。所以我目前的解決方案是手動創建TextNode：

$('#selector').append(document.createTextNode(text));

我想知道是否有任何jQuery的風格辦法做到這一點？

來源

2011-10-01 Niko

我已更新我的答案。 – Tebo

createTextNode方法可能是最好的方法。如果你想有一個jQuery-ish語法，你可以製作一個插件。

$.fn.appendText = function(text) { 
    return this.each(function() { 
     var textNode = document.createTextNode(text); 
     $(this).append(textNode); 
    }); 
};

來源

2011-10-01 10:56:09 lonesomeday

+1所有其他提供的方法*覆蓋容器元素的當前內容，這可能會導致事件偵聽器和DOM屬性消失/重置。 –

@lonesomeday嘿嘿，這是一個整潔易用的插件 – Deeptechtons

-1

您可以使用;

$.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; 
     } 
});

在追加到DOM之前轉義HTML字符。

使用它像; $.urlEncode(value)

使用它; $('#selector').append($.urlEncode(text));

更新＃1

你會這樣$('#selector').html($('#selector').html() + text);

我懷疑這是你想要的。

來源

2011-10-01 10:55:25 Tebo

這是有效的，但並不是我真正想要的：如果我的文字是'強'它應該正好顯示這個。您的代碼產生：'％3CB％3EHi％3C％2Fb％3E' – Niko

我剛剛發佈了更新。 – Tebo

感謝您的更新，但實際上這不起作用。現在它會顯示** Strong **，但我想顯示'Strong'。 – Niko

$.text()也接受函數作爲參數。該功能將收到一個索引和當前文本。函數的返回值將被設置爲新文本。

http://jsfiddle.net/4SvgV/1/

來源

2011-10-01 11:05:08 Andreas

謝謝，這是一個好主意。但不幸的是，容器內的任何元素都會被覆蓋，請參閱更新的小提琴：http://jsfiddle.net/4SvgV/2/ – Niko

如何附加/添加/創建使用jQuery

回答

相關問題