Use Javascript to add a character after the text in a list element, but before an indented list and without spaces between the text and the addition

Is there a way to add with regular Javascript to add a character to the text in a list element, but before an indented list occurs AND to have said character to not have an space between it and the original text? The actual text I have to use is not fixed.

Like, if I have this HTML:

  <ul>
      <li>Uno
        <ul>
               <li>One</li>
        </ul>
      </li>
      <li>Dos
        <ul>
               <li>Two</li>
        </ul>
      </li>
  </ul>

Use Javascript only to add a colon immediately after «Uno» and «Dos», like:

  • Uno:

    • One
  • Dos:

    • Two

But avoiding this result, which has an space in it (and pretty much any solution I can think of has that issue. I wouldn’t had much control over the HTML as I want to use it between a regular WordPress page):

  • Uno :

    • One
  • Dos :

    • Two

Answer

 //Get all LI which are immediate child of root UL
    let immediateLi = document.querySelectorAll('body > ul > li');

    //loop through the Li array and edit text node.
    for(let li of immediateLi) {
        li.childNodes[0].textContent = li.childNodes[0].textContent.trim() + ':'
    }

    //Important Note:
    //I have selected 0th child-node from the array because it is the default text-node containing our text. In case you are not sure if 0th child-node will hold the text content then you may filter the child-node array.
<ul>
    <li>Uno
      <ul>
             <li>One</li>
      </ul>
    </li>
    <li>Dos
      <ul>
             <li>Two</li>
      </ul>
    </li>
</ul>