innerHTML побочные эффекты? - PullRequest
Новая
       5

innerHTML побочные эффекты?

2 голосов
/ 08 января 2010

У меня возникли некоторые проблемы со ссылкой на элемент DOM, и я думаю, что это связано с тем, что что-то связано с обновлением innerHTML.

В этом примере при первом предупреждении две переменные ссылаются на один и тот же элемент, как и ожидалось. Что странно, так это то, что после обновления innerHTML родительского элемента (тела) две переменные, предположительно, различаются, несмотря на то, что они тоже не касаются. 

<html>
<head>
  <script type="text/javascript">

  var load = function () {
    var div1 = document.createElement('div');
    div1.innerHTML = 'div1';
    div1.id = 'div1';

    document.body.appendChild(div1);
    alert(div1 === document.getElementById('div1')); // true

    document.body.innerHTML += '<div>div2</div>';
    alert(div1 === document.getElementById('div1')); // false
  };

  </script>
</head>

<body onload="load();">
</body>

</html>

Использование == вместо === дает те же результаты. Я получаю одинаковые результаты в Firefox 3.5 и IE6. Любая идея, что заставляет второе предупреждение оценивать как ложное?

Ответы [ 2 ]

3 голосов
/ 08 января 2010

Когда вы получаете значение innerHTML тела, добавляете к нему строку и помещаете его обратно в тело, все элементы в теле воссоздаются из строки HTML. В переменной есть ссылка на элемент, которого больше нет на странице.

1 голос
/ 08 января 2010

Это потому что ... 

document.body.innerHTML += '<div>div2</div>';

... это не настоящее "дополнение" .. это полная замена. Конечно, замена равна старому контенту + новому контенту, дело в том, что это новая строка, вокруг которой строятся новые элементы DOM.

...