Come aggiungere/anteporre/creare un nodo di testo con jQuery

Question

Eventuali duplicati:
Escaping text with jQuery append?

mio HTML è un po 'come questo:

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

Ora io' mi piacerebbe aggiungere del testo a questo div So che avrei potuto usare semplicemente

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

, ma questo non sarebbe sfuggire caratteri speciali in text. Un altro modo è quello di avvolgere il testo in un arco:

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

Ma questo è brutto, perché crea markup inutili. Quindi la mia soluzione attuale è quella di creare manualmente un TextNode:

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

Mi chiedevo se c'è qualche jQuery stile modo per fare questo?

Answer 1

L'approccio createTextNode è probabilmente il modo migliore per andare. Se si desidera avere una sintassi jQuery-ish, è possibile creare un plug-in.

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

Answer 2

È possibile utilizzare;

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

per sfuggire caratteri HTML prima di aggiungere al DOM.

Utilizzare come; $.urlEncode(value)

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

Update # 1

Potreste questa $('#selector').html($('#selector').html() + text);

ho sospettato che questo era quello che volevi.

Answer 3

$.text() accetta anche una funzione come parametro. Questa funzione riceverà un indice e il testo corrente. Il valore di ritorno della funzione verrà impostato come nuovo testo.

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