使用元素的值与innerHTML？

Question

I know they say innerHTML is not safe and can be slow, even though it is now part of HTML5. On the other hand using DOM can be verbose.

What about using a value of eg value of a button?

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

It's a restaurant menu made with Codeigniter. So function receives value of a button, and its id and then the value is changed according to admin's input. Then it makes an ajax call to a database and changes the relevant entry. Im planning to sanitize the input of course.

So is the above better than using a textarea and innerHTML?:

 document.getElementById(idP).innerHTML = change_item;

The value to be changed could be a line in the menu eg Espresso $2.50, it doesnt matter if I use a button as long as the admin can click on it and change the value in the actual menu.

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

EDIT:

If you google why is innerHTML bad - you will get a lot of results, for (example this answer on SO)[ Why is "element.innerHTML+=" bad code?

Answer 1

when you submit a form it sends its inputs value not innerHTML.

but textarea has special behavior that when you change innerHTML it automaticlly change value .

so for example if you have textarea:

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

and you set its innerHTML:

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

if you tried to set innerHTML for input or button its value won't be changed like textarea so when you send the form it will send empty string.

<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

You're mixing cows with ballet.
If you only need to operate over input s and textarea s, let's make it short: use
yourElement.value = "some value" .

(You cannot operate using innerHTML over an input element in any case.)

Answer 3

Try to use textContent instead of innerHTML .

Using innerHTML to modify a document causes the document to be re-parsed, which is inefficient and has critical drawbacks, including invalidating any JavaScript reference to replaced DOM nodes, clearing any JavaScript properties and event listeners on replaced DOM nodes, and re-executing any script tags in the changed markup.

Hope it will be useful for you.