How can I change an element's text without changing its child elements?

Question

I\'d like to update element\'s text dynamically:

   **text to change**
   
       text t         


        
      

Answer 1

$.fn.textPreserveChildren = function(text) {
  return this.each(function() {
    return $(this).contents().filter(function() {
      return this.nodeType == 3;
    }).first().replaceWith(text);
  })
}

setTimeout(function() {
  $('.target').textPreserveChildren('Modified');
}, 2000);

.blue {
  background: #77f;
}
.green {
  background: #7f7;
}

Outer text
  
Nested element


Another outer text
  
Another nested element