javascript - 为什么我丢失了对元素的引用？

Question

我偶然发现了一些奇怪的东西(至少对我来说是这样)。情况如下:

我从 DOM 中选择一个元素 child1 并将其保存到一个变量中。我继续向 child1 的父级 parent1 添加一个新元素。现在，如果我尝试修改 child1 上的某些值，它不会注册更改。似乎引用已经消失，它仅指较早的副本。

示例
child1 = 输入字段
parent1 = 容器

function start() {
    var inputField = document.querySelector('#inputField');
    // Works if addSomething() is commented 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();

示例 fiddle

http://jsfiddle.net/mdTkZ/

对不起，如果这是非常基础的问题或之前有人问过的问题。我尝试使用谷歌搜索，但没有找到我使用的搜索词的任何内容。一个

Answer 1

container.innerHTML += ... 并不像您认为的那样。它重新创建元素的所有 HTML，原始内容消失了。

要解决此问题，您需要创建一个新的 div 并将其附加到 container。

var div = document.createElement('div');
div.className = 'something';
container.appendChild(div);

A live demo at jsFiddle .