Vi sarà certamente capitato di dover gestire con jQuery quegli elementi HTML che contengono solo testo, magari dovendo aggiungere altri elementi prima o dopo il nodo di testo dell'elemento. I metodi di jQuery prependTo() e appendTo() purtroppo funzionano solo con nodi di tipo elemento (ossia con valore 1). Nel nostro caso solo il secondo metodo funzionerebbe, perchè di fatto aggiungerebbe il nuovo elemento al nodo elemento che contiene il testo. Nel primo caso invece dovremmo includere il nodo di testo in un nuovo elemento usando wrapInner() e quindi usare prependTo() sul nuovo elemento creato. Ispirandomi ai filtri di WordPress sul contenuto dei post, ecco invece una soluzione molto più rapida.
Supponiamo di avere questa struttura:
<ul id="test">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
Vogliamo aggiungere un elemento strong prima del contenuto della prima voce di lista e dopo il contenuto dell'ultima. Ecco la nostra soluzione:
(function($) {
$.fn.insert = function(options) {
var that = this;
var settings = {
content: '',
where: 'before'
};
options = $.extend(settings, options);
var element = that[0];
var html = that.html();
if(element.childNodes.length == 1 && element.firstChild.nodeType == 3) {
switch(options.where) {
case 'before':
return that.each(function() {
that.html(options.content + html);
});
case 'after':
return that.each(function() {
that.html(html + options.content);
});
default:
return that.each(function() {
that.html(options.content + html);
});
}
}
};
})(jQuery);
Esempio d'uso:
$(function() {
$('li:first', '#test').insert({content: '<strong>1</strong>'});
$('li:last', '#test').insert({content: '<strong>3</strong>', where: 'after'});
});
Volendo potremmo usare innerHTML per rendere ancora più performante il codice:
var element = that[0];
var html = element.innerHTML;
// continua
return that.each(function() {
element.innerHTML(options.content + html);
});
In questo modo l'inserimento di contenuti prima e dopo il nodo di testo è molto più veloce. Potete visionare l'esempio finale in questa pagina.