Replacing nextSibling with other string

Question

I have the following span element:

<div class="text" contenteditable="true" id="example">
   <div class="outside">Type here <span class="inside"> please</span>.</div>
   <div class="outside">Name here <span class="inside"> first </span>name</div>
</div>

Using the following js function, I can get the length of in between </span> and </div>:

$('span.inside').each(function() {               
    var sphs = $(this).get(0).nextSibling;
    var len = sphs.length;

    //If the length is less than 2
    if(len < 2){
        // i want to replace it with another words like "thanks."   

       }
 })

If the length is less than 8, then I want to replace it with another words or strings ( for example, thanks.) IN BETWEEN </span> and </div> (see the word "thanks" placement).

<div class="text" contenteditable="true" id="example">
   <div class="outside">Type here <span class="inside"> please</span>thanks.</div>
</div>

How would I replace it with another string?

EDIT:

Note that I am using .each as there could be multiple span element with the same class name. In the first line, there is only a period (</span>.</div>), thus it satisfies the condition and will be replaced with another word (in this case "thanks").

In the second line (</span>name</div>), the length is larger than 2, thus it won't get replaced.

I hope this clarifies it.

<div class="text" contenteditable="true" id="example">
   <div class="outside">Type here <span class="inside"> please</span>.</div>
   <div class="outside">Name here <span class="inside"> first </span>name</div>
</div>

...will become...

<div class="text" contenteditable="true" id="example">
   <div class="outside">Type here <span class="inside"> please</span> thanks.</div>
   <div class="outside">Name here <span class="inside"> first </span>name</div>
</div>

Answer 1

$('span.inside').each(function() {               
    var sphs = $(this).get(0).nextSibling;
    var len = sphs.length;

    //If the length is less than 2
    if(len < 2){
        // DOM method:
        sphs.textContent = ' Thanks.';
        // jQuery method:
        $(this).parent().get(0).childNodes[2].textContent = ' Thanks.';
    }
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="text" contenteditable="true" id="example">
   <div class="outside">Type here <span class="inside"> please</span>.</div>
   <div class="outside">Type here <span class="inside"> please</span> ok?</div>
</div>

Or try here https://jsfiddle.net/8pa4akzh/3/

Answer 2

Add an extra (empty) span and set it. It's as simple as setting the text() of the span.

HTML:

<div class="text" contenteditable="true" id="example">
    <div class="outside">Type here <span class="inside"> please</span><span id="extra"></span></div>
</div>

JS:

   //If the length is less than 2
   if(len < 2){
        $('span#extra').text("thanks.");
   }