Использование значения элемента vs innerHTML?

Question

Я знаю, что они говорят, что innerHTML небезопасен и может быть медленным, хотя теперь он является частью HTML5. С другой стороны, использование DOM может быть подробным.

Как использовать значение, например. значение кнопки?

function changeit (valueff, idP){ 
var change_item = prompt("Change this item",valueff);  
if (change_item) 
{ 
    document.getElementById(idP).value = change_item; 
} 
... 

Это меню ресторана, выполненное с использованием Codeigniter. Таким образом, функция получает значение кнопки и ее идентификатор, а затем значение изменяется в соответствии с входом администратора. Затем он вызывает ajax-вызов базы данных и изменяет соответствующую запись. Я планирую санировать курс, конечно.

Так выше лучше, чем при использовании innerHTML и текстовое поле ?:

document.getElementById(idP).innerHTML = change_item; 

значение, которое должно быть изменено может быть строка в меню, например, Espresso $ 2,50, это не имеет значения, если я использую кнопку, пока администратор может нажать на нее и изменить значение в текущем меню.

<input id="list_5" type="button" value="Espresso $2.50" onclick="changeit(this.value,this.id);"> 

EDIT:

Если Google почему innerHTML плохо - вы получите много результатов, для (например, этот ответ на SO) [Why is "element.innerHTML+=" bad code?

Answer 1

при отправке формы она посылает его входные значения не являются внутренними.

, но textarea имеет особое поведение, которое при изменении innerHTML оно автоматически меняет value.

так, например, если у вас есть текстовое поле:

<textarea id='test'></textarea>

и установить его innerHTML:

var textarea=document.getElementById('test'); 
textarea.innerHTML='this text is in innerHTML'; 
conosole.log(textarea.value); //'this text is in innerHTML' 

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

<input type='text' id='inp' />

var inp=document.getElementById('inp'); 
inp.innerHTML='this text is in innerHTML'; 
conosole.log(inp.value); //'' (empty string) 

Answer 2

Вы смешивания коров с балетом.
Если вам нужна только работа над input s и textarea s, давайте сделаем это коротко: используйте
yourElement.value = "some value".

(Вы не можете работать, используя innerHTML над input элементом в любом случае.)

Answer 3

Попробуйте использовать textContent вместо innerHTML.

Использование innerHTML для изменения документа приводит к тому, документ будет повторно разобран, который является неэффективным и имеет критические недостатки, в том числе утрачивает какие-либо ссылки на JavaScript для замененных узлов DOM, очистка любых свойств JavaScript и слушатели событий на заменили узлы DOM, и повторно выполнили теги скриптов в измененной разметке.

Надеюсь, это будет полезно для вас.