Javascript - как изменить innerText метки, не стирая ввод

Я хотел бы спросить, как с помощью Javascript изменить метку innerText переключателей (см. код ниже), не стирая тег ввода внутри. Внутренний текст метки здесь означает "Button-Label-X".

Я пытался диагностировать стиль метки с помощью элементов document.getElementsByClassName("radio-label"), в том числе

  • textContent: "Кнопка-Ярлык-X"
  • innerText : "Кнопка-Ярлык-X"
  • externalText : "Кнопка-Ярлык-X"

затем присвоил им новое строковое значение (например, «Button-Label-Y»). Однако все эти способы приводят к одному и тому же результату: ввод пропал, осталось только новое значение. У кого-нибудь есть идеи здесь?

<div class="radio">
  <label class="radio-label"><input type="radio" name="optradio"> Button-Label-X </label>
</div>

Конечно, я мог бы сделать наоборот, поместив входной тег вне метки, тогда все решено. Но в этом случае я должен установить id для ввода и "for:id" для метки. И это становится утомительной работой для случая 05 кнопок вместо 01.


javascript input html label innertext
person TrungNguyen    schedule 15.08.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если я вас правильно понял, вы можете получить доступ к текстовой части из childNodes. Получив его, вы можете изменить текст, установив свойство textContent к нужному тексту.

Как это:

function changeLabelText(label, text) {
  var children = label.childNodes;
  [].forEach.call(children, function(child) {
    if (child.nodeType == 3) {
      child.textContent = text;
    }
  });
}

var label = document.querySelector('label');
changeLabelText(label, 'blabla');
<div class="radio">
  <label class="radio-label"><input type="radio" name="optradio"> Button-Label-X </label>
</div>

person Mosh Feu    schedule 15.08.2017
comment
Превосходно! Ваше предложение привело меня к правильному ответу. Я просто изменил childNodes[ ].data или childNodes[ ].textContent в document.getElementsByClassName(radio-label), после чего все заработало отлично. Благодарю вас! - person TrungNguyen; 15.08.2017