Как удалить текст, не трогая дочерние элементы?

Question

[Mishcake]

Всем привет. Подскажите, пожалуйста, как удалить текст в элементе, чтобы внутрь добавить другой контент?

В наличии:

<label>
  <input type="radio" name="field-value-1359303" value="Вася">Вася
</label>

По итогу нужно удалить текст "Вася" внутри label, сделав инпут скрытым. И добавить доп. контент:

<label>
  <input type="radio" name="field-value-1359303" value="Вася">
  <div>Новый контент</div>
</label>

Делаю на jquery и получается только инпут скрыть.

$('input[value="Вася"]')
  .hide()
  .parents('label')
  ????
  .append('<div>my content</div>');

Тут я ищу нужный мне инпут, скрываю его (чтобы не было видно чекбокса), возвращаюсь к родительскому label, пытался всё стереть с помощью .text(''), но тогда стирается инпут. И в конце добавляю нужный элемент внутрь.

Терять инпут нельзя, потому что он генерируется с рандомными значениями классов и отвечает за выборы в форме.

Comments

[v3shin]

Есть вариант запихнуть текст в отдельный span с классом?

Answer 1

[Сергей Соколов]

Надо перебирать узлы – Nodes – в свойстве childNodes у label.

Текст будет в отдельном узле с типом Node.TEXT_NODE и именем nodeName == "#text"

Методом Node.replaceChild() заменить его на добавляемое под-дерево.

Answer 2

[Алексей Дубровин]

Сохраните этот инпут в переменную.

const myInput = document.querySelector('.....');
myInput.parentNode// стираем и делам что хотим
.append(myInput)
.append('.......')

Answer 3

[Mishcake]

Каюсь, что сделал на jquery (а не на ванильном джсе), но итог устраивает полностью:

$('input[value="Вася"]')
    .hide()
    .parents('label')
    .append('<div>my content</div>')
    .contents().filter(function(){ return (this.nodeType == 3);}).remove();