This is the example page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div id="outerDiv"><div id="innerDiv"><input type="checkbox"></div></div>
<button type="button">Delete</button>
<script>
var inner = document.getElementById('innerDiv');
console.log(inner);
document.querySelector('button').addEventListener('click', function() {
document.getElementById('outerDiv').innerHTML = 'hello world';
console.log(inner);
});
</script>
</body>
</html>
when click the Delete
button, outerDiv
will change innerHTML, then console the inner
value
in chrome
<div id="innerDiv"><input type="checkbox"></div>
but in ie
<div id="innerDiv"></div>
so the variable inner
value are different in chrome/ie
It seems that ie
browser will remove innerDiv
content but not in chrome