Here is the code:
var img = document.createElement('img');
console.log(img);
[1, 2].forEach(function (item) {
console.log(img);
img.removeAttribute("src")
console.log(img);
var img_src = document.createAttribute("src");
img_src.value = '/test?id=' + item;
img.setAttributeNode(img_src);
console.log(img);
});
First I ran it in Chrome and got the result:
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
But when I use the step in the debugger or run it in Firefox, the result will be the same as I thought:
<img>
<img>
<img>
<img src="/test?id=1">
<img src="/test?id=1">
<img>
<img src="/test?id=2">
Perhaps the best way is to put the instruction in the forEach function.
Is this a bug in the Chrome Developer Tool?
source
share