Question

我偶然发现了一些奇怪的东西（至少对我而言）。情况就是这样：

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

示例
child1 = inputField
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

Answer 2

您正在通过设置innertHTML替换整个DOM子树。 inputField现已与其父级分离。您可以通过记录inputField.parentNode === null来检查它。

您可以改为使用insertAdjacentHTML。

function addSomething() {
    var container = document.querySelector('#container');
    container.insertAdjacentHTML('beforeend', '<div class="something"></div>');
}

http://jsfiddle.net/tarabyte/mdTkZ/1/

Answer 3

在对象上替换innerHTML时，从DOM中删除inputField，以便对象更改不会在浏览器中注册

container.innerHTML += '<div class="something"></div>'

你实际上是

container.innerHTML = container.innerHTML + '<div class="something"></div>';

Answer 4

执行container.innerHTML += '<div class="something"></div>'后，它会将内容替换为其他text。

在更改inputField之前，您拥有的

innerHTML持有对DOM对象的引用。但现在，它被破坏了，只用一个字符串代替。您需要再次从DOM（input）访问/选择document.querySelector('#inputField');来使用它。

Answer 5

从此：Is it possible to append to innerHTML without destroying descendants' event listeners?

＆＃34;不幸的是，即使您尝试追加＆＃34;

，对innerHTML的分配也会导致所有子元素的破坏。

您可以使用：https://developer.mozilla.org/en-US/docs/Web/API/element.insertAdjacentHTML

Answer 6

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

为什么我会丢失对元素的引用？

6 个答案: