javascript - Using value of an element vs innerHTML? -

i know innerhtml not safe , can slow, though part of html5. on other hand using dom can verbose.

what using value of e.g. value of button?

function changeit (valueff, idp){ var change_item = prompt("change item",valueff);     if (change_item) {     document.getelementbyid(idp).value = change_item; } ... 

it's restaurant menu made codeigniter. function receives value of button, , id , value changed according admin's input. makes ajax call database , changes relevant entry. im planning sanitize input of course.

so above better using textarea , innerhtml?:

 document.getelementbyid(idp).innerhtml = change_item; 

the value changed line in menu e.g. espresso $2.50, doesnt matter if use button long admin can click on , change value in actual menu.

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

edit:

if google why innerhtml bad - lot of results, (example answer on so)[why "element.innerhtml+=" bad code?

when submit form sends inputs value not innerhtml.

but textarea has special behavior when change innerhtml automaticlly change value.

so example if have textarea:

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

and set innerhtml:

var textarea=document.getelementbyid('test'); textarea.innerhtml='this text in innerhtml'; conosole.log(textarea.value); //'this text in innerhtml' 

if tried set innerhtml input or button value won't changed textarea when send form send empty string.

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

var inp=document.getelementbyid('inp'); inp.innerhtml='this text in innerhtml'; conosole.log(inp.value); //'' (empty string)