Когда предпочтительнее использовать innerText вместо значения элемента и наоборот? HTML, JS

скажем, я хочу создать HTML-кнопку с текстом на ней, например, Click me! - а затем получить доступ к нему в моем приложении JS. Я мог бы установить текст этой кнопки как значение узла или, например, как innerText (я знаю, что есть также innerHtml и InnerTextContent, но в данном случае они не имеют значения для меня). Когда я использую innerText, когда я использую значение, чтобы установить этот текст, предпочтительно?

Я знаю и (думаю, я) понимаю разницу между ними обоими, но пока не знаю, когда предпочесть тот или иной. Есть ли что-то вроде эмпирического правила для этого вопроса? Какие-нибудь большие недостатки/преимущества?

Заранее большое спасибо!

Редактировать: Спасибо за ваши ответы, вау, это было быстро! :) Просто чтобы прояснить ситуацию и избежать недоразумений - как я уже сказал выше, мой вопрос не о InnerHTML или TextContent или обо всех других возможных способах получения текста на кнопке.

На самом деле я имею в виду только различные варианты использования между value и innerText с целью установить видимый текст кнопки как Click Me! прямо на эту кнопку. Я ищу правило наилучшей практики для этого, можно сказать. :)

Я думаю, TJ Crowder ответил на это действительно хорошо, спасибо TJ и, конечно же, спасибо всем остальным за ваше время и помощь! :) Поскольку я новичок на этой платформе, мне еще не разрешено ставить вам лайки. ПОЧУВСТВУЙТЕ, пожалуйста. :D Спасибо!


javascript button html innertext nodevalue
person Sonic    schedule 18.10.2020    source источник
comment
Вы все равно должны использовать .textContent вместо innerText. И в целом вам следует избегать innerHTML, потому что он запускает дорогостоящую повторную обработку и нарушает ссылки на объекты элементов DOM.   -  person Dai    schedule 18.10.2020

Ответы (3)


arrow_upward
1
arrow_downward

Вы используете value только для элементов управления формой (input, button, select и textarea). Для любого другого элемента, если вам нужен его текст, используйте textContent или innerText (или, в зависимости от вашего варианта использования, innerHTML).

Единственная сложная проблема — это button, единственный элемент управления формой, который имеет и value и текст. value в button — это значение, которое будет отправлено, если эта кнопка отправит форму, в которой она находится. текст — это то, что пользователь видит как заголовок кнопки. Вот пример:

const btn = document.querySelector("button");
console.log(`The button's value is: ${btn.value}`);
console.log(`The button's textContent is: ${btn.textContent}`);
<button value="42">Forty-Two</button>

person T.J. Crowder    schedule 18.10.2020

arrow_upward
0
arrow_downward

value относится к атрибуту тега (элементы управления на основе текста, такие как <input type="text">, <textarea> и т. д., а также многие элементы управления формы <input>), а innerHTML относится к содержимому HTML между началом и концом тега.

Пример <span id="oSpan">myText</span> теперь oSpan.innerHTML myText. И, как это текстовое поле <input id="oText" value="some text"/>, теперь oText.value это some text, которое находится в текстовом поле.

person programmer365    schedule 18.10.2020
comment
value относится к атрибуту тега Нет, это не так. Он относится к текущему значению элемента управления формы, которое вообще не представлено никаким атрибутом. (Атрибут value — это значение по умолчанию элемента управления формы, а не его текущее значение.) - person T.J. Crowder; 18.10.2020

arrow_upward
0
arrow_downward

когда вы используете <button>, вы можете использовать html внутри тега кнопки так же, как показано ниже:

<button>
   <span>
      Click Me!
   </span>
</button>

но когда вы используете . вы не можете использовать html внутри тега, потому что это самозакрывающийся тег, и вы можете установить только значение:

<input value="Click Me!" />

В javaScript, когда вы устанавливаете value, вы устанавливаете атрибут значения выбранного элемента DOM, если он имеет атрибут «значение».

document.getElementById("inputButton").value = "Click Me!" //<input value="Click Me!" id="inputButton">

но с innerHtml вы устанавливаете HTML внутри выбранного элемента DOM:

document.getElementById("myButton").innerHtml = '<span>Click Me!</span>' 
/*<button id="myButton">
   <span>Click Me!</span>
</button>*/
person Mehrzad Tejareh    schedule 18.10.2020
comment
value в button может отличаться от его текста. - person T.J. Crowder; 18.10.2020