I stumbled upon something peculiar (at least to me). Here is the case:
I select an element, child1, from the DOM and save it to a variable. I continue on by adding a new element to child1's parent, parent1. Now if I try to modify some value on child1 it does not register the change. It seems as though the reference has disappeared and it is only referring to an earlier copy.
EXAMPLE
child1 = inputField
parent1 = container
function start() {
var inputField = document.querySelector('#inputField');
// Works if addSomething() is mented out.
addSomething();
console.log(inputField);
doSomething(inputField);
}
function addSomething() {
var container = document.querySelector('#container');
container.innerHTML += '<div class="something"></div>'
}
function doSomething(el) {
el.value = 'Some random input';
}
start();
EXAMPLE FIDDLE
/
Excuse me if this is something incredibly basic or something that has been asked before. I tried googling, but did not find anything with the search words I used. A
I stumbled upon something peculiar (at least to me). Here is the case:
I select an element, child1, from the DOM and save it to a variable. I continue on by adding a new element to child1's parent, parent1. Now if I try to modify some value on child1 it does not register the change. It seems as though the reference has disappeared and it is only referring to an earlier copy.
EXAMPLE
child1 = inputField
parent1 = container
function start() {
var inputField = document.querySelector('#inputField');
// Works if addSomething() is mented out.
addSomething();
console.log(inputField);
doSomething(inputField);
}
function addSomething() {
var container = document.querySelector('#container');
container.innerHTML += '<div class="something"></div>'
}
function doSomething(el) {
el.value = 'Some random input';
}
start();
EXAMPLE FIDDLE
http://jsfiddle/mdTkZ/
Excuse me if this is something incredibly basic or something that has been asked before. I tried googling, but did not find anything with the search words I used. A
Share Improve this question asked Jun 24, 2014 at 9:52 UirriUirri 2731 silver badge11 bronze badges 2-
try
console.log(inputField.value)
afterdoSomething
. It is getting modified. What do you want exactly ? – schnill Commented Jun 24, 2014 at 10:13 - 1 I don't want to achieve anything in particular, actually. I just want to get a better understanding of how stuff works :p. – Uirri Commented Jun 24, 2014 at 10:30
6 Answers
Reset to default 5container.innerHTML += ...
doesn't do what you think it does. It re-creates all the HTML to the element, and the original content is gone.
To fix this you need to create a new div
and append it to container
.
var div = document.createElement('div');
div.className = 'something';
container.appendChild(div);
A live demo at jsFiddle.
You are replacing the entire DOM subtree by setting innertHTML. inputField
is now detached from its parent. You can check it by logging inputField.parentNode === null
.
You can use insertAdjacentHTML
instead.
function addSomething() {
var container = document.querySelector('#container');
container.insertAdjacentHTML('beforeend', '<div class="something"></div>');
}
http://jsfiddle/tarabyte/mdTkZ/1/
When you do container.innerHTML += '<div class="something"></div>'
, it replaces the content with some other text
.
inputField
which you had before changing innerHTML
, was holding a reference to DOM object. But now, that is destroyed and is replaced by just a string. You would need to access/select that input
from DOM again ( by document.querySelector('#inputField');
) to use it.
When replacing innerHTML on object you removing inputField from the DOM so the object changes does not register in the browser
container.innerHTML += '<div class="something"></div>'
You actually do
container.innerHTML = container.innerHTML + '<div class="something"></div>';
From this: Is it possible to append to innerHTML without destroying descendants' event listeners?
"Unfortunately, assignment to innerHTML causes the destruction of all child elements, even if you're trying to append"
You could use: https://developer.mozilla/en-US/docs/Web/API/element.insertAdjacentHTML
Try this
var inputField;
function start()
{
inputField = document.getElementById('inputField');
// Works if addSomething() is mented out.
addSomething();
console.log(inputField);
doSomething(inputField);
}
function addSomething()
{
var t=document.getElementById('container').innerHTML;
document.getElementById('container').innerHTML = t+'<div class="something"></div>'
}
function doSomething(el)
{
el.value = 'Some random input';
}
start()