Jquery - Modify a string into a span without replacing everything

Question

I have the following code and I try to modify the 'delivered' string at the beginning of the span. But I end up replacing all the content of the span if I use the text() method.

I tried:

$('#delivered-on').parent().text(' Delivered on: ');
$('span.wizard-filter-delivery-date').not('#delivered-on,.deliveryDays-container').text(' Delivered on: ');

Do you have an idea how I could do that? Best, Nicolas

<span class="wizard-filter-delivery-date col-sm-12">
   delivered 
   <span id="delivered-on">
      <div data-reactroot="" class="deliveryDays-container">
         <div class="deliveryDays-no-touch-dropdown-container">
            <div class="Select Select--single is-searchable has-value">
               <div class="Select-control">
                  <div class="Select-value"><span class="Select-value-label">Friday, 13th May</span></div>
                  <div class="Select-input" style="display: inline-block;">
                     <input style="width: 5px; box-sizing: content-box;">
                     <div style="position: absolute; visibility: hidden; height: 0px; width: 0px; overflow: scroll; white-space: pre; font-size: 21px; font-family: Lato, Helvetica, sans-serif; font-weight: normal; font-style: normal; letter-spacing: normal;"></div>
                  </div>
                  <span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
               </div>
            </div>
         </div>
         <div class="deliveryDays-touch-dropdown-container">
            <select class="deliveryDays-select">
               <option value="484">Friday, 13th May</option>
               <option value="610">Saturday, 14th May</option>
               <option value="725">Monday, 16th May</option>
               <option value="487">Wednesday, 18th May</option>
               <option value="488">Friday, 20th May</option>
               <option value="611">Saturday, 21st May</option>
            </select>
         </div>
      </div>
   </span>
</span>

Answer 1

Get the text node and replace it with the new content

$('.wizard-filter-delivery-date')
  .contents() // get all child nodes
  .eq(0) // get the first element, which is the text node to be replaced
  .replaceWith(' Delivered on: '); // replace the text

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="wizard-filter-delivery-date col-sm-12"> delivered <span id="delivered-on"><div data-reactroot="" class="deliveryDays-container"><div class="deliveryDays-no-touch-dropdown-container"><div class="Select Select--single is-searchable has-value"><div class="Select-control"><div class="Select-value"><span class="Select-value-label">Friday, 13th May</span>
</div>
<div class="Select-input" style="display: inline-block;">
  <input style="width: 5px; box-sizing: content-box;">
  <div style="position: absolute; visibility: hidden; height: 0px; width: 0px; overflow: scroll; white-space: pre; font-size: 21px; font-family: Lato, Helvetica, sans-serif; font-weight: normal; font-style: normal; letter-spacing: normal;"></div>
</div><span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
</div>
</div>
</div>
<div class="deliveryDays-touch-dropdown-container">
  <select class="deliveryDays-select">
    <option value="484">Friday, 13th May</option>
    <option value="610">Saturday, 14th May</option>
    <option value="725">Monday, 16th May</option>
    <option value="487">Wednesday, 18th May</option>
    <option value="488">Friday, 20th May</option>
    <option value="611">Saturday, 21st May</option>
  </select>
</div>
</div>
</span>
</span>

---

Pure JavaScript method

document.getElementsByClassName('wizard-filter-delivery-date')[0] // get element by class name
  .childNodes[0] // get text node from all children nodes
  .textContent = ' Delivered on: '; // replace the text

<span class="wizard-filter-delivery-date col-sm-12"> delivered <span id="delivered-on"><div data-reactroot="" class="deliveryDays-container"><div class="deliveryDays-no-touch-dropdown-container"><div class="Select Select--single is-searchable has-value"><div class="Select-control"><div class="Select-value"><span class="Select-value-label">Friday, 13th May</span>
</div>
<div class="Select-input" style="display: inline-block;">
  <input style="width: 5px; box-sizing: content-box;">
  <div style="position: absolute; visibility: hidden; height: 0px; width: 0px; overflow: scroll; white-space: pre; font-size: 21px; font-family: Lato, Helvetica, sans-serif; font-weight: normal; font-style: normal; letter-spacing: normal;"></div>
</div><span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
</div>
</div>
</div>
<div class="deliveryDays-touch-dropdown-container">
  <select class="deliveryDays-select">
    <option value="484">Friday, 13th May</option>
    <option value="610">Saturday, 14th May</option>
    <option value="725">Monday, 16th May</option>
    <option value="487">Wednesday, 18th May</option>
    <option value="488">Friday, 20th May</option>
    <option value="611">Saturday, 21st May</option>
  </select>
</div>
</div>
</span>
</span>