CODEWITHSUNDEEP
javascripthtmldominnerhtml
yakov
yakov

Reputation: 454

What is wrong with the next sibling of the textarea?

When this script is inserted into HTML document, it causes the strange behaviour. The shown textarea element losts its value after the <br> tag insertion (I've tested it in the Chrome 42):

var text = document.createElement("textarea");
document.body.appendChild(text);
text.value = "text";
alert("value presents");
document.body.innerHTML += "<br>"; //(*)
alert("value absents");

What is the reason for this?

Upvotes: 0

Views: 229

Answers (4)

whatever
whatever

Reputation: 342

so why don't you do this

document.body.appendChild(document.createElement("br"));

so there is still a security risk whenever you use innerHTML to set strings over which you have no control. For example: var name = "<img src=x onerror=alert(1)>"; el.innerHTML = name; // shows the alert For that reason, it is recommended you not use innerHTML when inserting plain text; instead, use node.textContent. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.

read for details here

Upvotes: 1

zzzzBov
zzzzBov

Reputation: 179046

The innerHTML property is a sledgehammer.

By calling document.body.innerHTML += '<br>' what you have done is removed every element from the <body> and replaced them with brand new elements that happen to share the same structure.

The value property was set on the original <textarea> but the brand new one never had its value property set.

If all you want to do is append a <br> element, create one and append it through the DOM api:

var br = document.createElement('br');
document.body.appendChild(br);

Upvotes: 4

jfriend00
jfriend00

Reputation: 707328

Change this:

document.body.innerHTML += "<br>";

to this:

document.body.appendChild(document.createElement("br"));

This will append a single new element to the DOM rather that replace the entire contents of your DOM with all new elements.

When you do this:

document.body.innerHTML += "<br>";

it is the equivalent of this:

var str = document.body.innerHTML;
str += "<br>";
document.body.innerHTML = str;

So, you are turning the entire body DOM into an HTML string, adding one thing onto the end of the string, then replacing the entire body DOM with a new piece of HTML which will create all new elements.

Besides the inefficiency of doing it this way, it also replaces all the DOM elements with different DOM elements so any DOM references or event handlers are now broken and any dynamic changes you made to DOM elements that aren't reflected in the HTML will be lost.

Upvotes: 2

Guffa
Guffa

Reputation: 700342

What you are doing when you are using the += operator like this:

document.body.innerHTML += "<br>";

is the same as:

document.body.innerHTML = document.body.innerHTML + "<br>";

So you are taking all the elements in the body and convert to HTML code, append some more HTML code, and then turn it into elements again.

When you get the HTML code for an element, you only get the original HTML code that it was created from, not the current values. The text inside the text area is reset to what it was when it was created, i.e. before you set the value property.

To add an element you should rather create it and append it. That won't disrupt the elements that are already there:

var br = document.createElement("br");
document.body.appendChild(br);

Upvotes: 2

Related Questions