Using value of an element vs 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 e.g. 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 e.g. 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?

innerHTML is not slow at all. jQuery uses it massively to set/get Elements content. "*value* vs. *innerHTML*" ? It logically just depends on whether you want to change a value *or* an element's HTML. — Roko C. Buljan, Apr 10 '15 at 00:51
I never read a serious article that says *why* `innerHTML` is/*should* be unsafe. — Roko C. Buljan, Apr 10 '15 at 00:59
I guess my question isn't clear. Is getElementById(idP).value = change_item; better than getElementById(idP).innerHTML = change_item; ? In both cases Im changing the text of an element, just two different approaches since many say that innerHTML is not safe. — Vegan Sv, Apr 10 '15 at 01:00
You cannot change the text of a DIV element using `element.value = "blah"`. `value` applies only to form action elements. — Roko C. Buljan, Apr 10 '15 at 01:00
For example (this post on reddit) [http://www.reddit.com/r/learnjavascript/comments/2bm0ls/is_it_bad_practice_to_useinnerhtml_when_editing/] — Vegan Sv, Apr 10 '15 at 01:02
That's not a serious programming article. And you should know that you cannot (should never) submit / trust unsanitized data. `innerHTML` is just a *tool*, just like any other method. — Roko C. Buljan, Apr 10 '15 at 01:04
If you read again the provided answer you'll notice that there's no talk about something being `unsafe`. — Roko C. Buljan, Apr 10 '15 at 01:10
`input` != `textarea`, you cannot operate using `innerHTML` over an `input` element. Said that you're now left with 2 totally different elements where each of them play totally different rules from the beginning of the era of *form*. — Roko C. Buljan, Apr 10 '15 at 01:12

score 0 · Answer 1 · answered Apr 10 '15 at 00:51

0

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)

answered Apr 10 '15 at 00:51

Omar Elawady

3,300
1
13
17

That's true, and the difference is that `textarea` is not a *void* element (needs a closing ``) therefore the innerHTML shares the same string with it's `value` property. – Roko C. Buljan Apr 10 '15 at 00:53
This is a button -> and Im changing its value with the above code easily – Vegan Sv Apr 10 '15 at 01:14
the post you have mentioned in your post is talking about performance not safety. and also performance in containing elements such as divs and `body` tag. since you're using textarea.I think there'is no difference between both `innerHTML` and `value` – Omar Elawady Apr 10 '15 at 01:18
"...I know they say innerHTML is not safe and can be slow" <- so it's both. I didnt say anything about divs or body... – Vegan Sv Apr 10 '15 at 01:44
it can be slow in containers such as divs but not in `textarea`. but there're not safety issues in using `innerHTML – Omar Elawady Apr 10 '15 at 01:49

score 0 · Answer 2 · answered Apr 10 '15 at 01:14

0

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

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

answered Apr 10 '15 at 01:14

Roko C. Buljan

196,159
39
305
313

@VeganSv well I read again twice your question, and it's totally unclear what elements are you going to change values. – Roko C. Buljan Apr 10 '15 at 01:20
@VeganSv you say in your question that you're going to sanitize the value. What are you afraid of using `innerHTML` to place the desired value inside a table? – Roko C. Buljan Apr 10 '15 at 01:21

score 0 · Answer 3 · answered Apr 10 '15 at 05:04

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.

Using value of an element vs innerHTML?

3 Answers3