Javascript 搬迁后的预期行为<；img>；从<；图片>；元素？

我有一些带有

元素的HTML，如果可能，可以加载WebP URL并返回到jpeg：

<div id='placeA'>
</div>

<div id='placeB'>
  <picture>
    <source type="image/webp" 
            srcset="http://www.wpclipart.com/animals/bugs/butterfly/butterfly_4/Monarch_butterfly_USGS.webp">
    <img src="http://www.clipartbest.com/cliparts/9cz/MMn/9czMMnpcE.jpeg" alt="A butterfly.">
  </picture>
</div>

然而，这张图片仍然显示了Chrome中的WebP变体。我认为从图片元素中删除图像会将图像与源集分开，但显然不是这样。这种行为是否符合W3C规范

---

小提琴演示：

好问题。答案几乎肯定不是，如果只是因为这种行为令人惊讶的话。要准确地确定规范在这方面的内容并不容易，但说明每当发生各种DOM突变事件时，必须创建映像，其中一个事件被称为测试用例。因此，这似乎是一个Chrome bug。

这里的问题可能是您没有从

图片

标记中删除图像，而只是将对它的引用复制到另一个页面元素

#placeA

可能需要这样的东西

// references to on-page elements
var placeA = document.getElementById('placeA');
var pictureIMG = document.querySelector('picture img');

// save image file location into a variable
var pictureIMGsrc = pictureIMG.src;

// create a image element with this src
var newIMG = document.createElement('img');
newIMG.src = pictureIMGsrc;

// remove image from picture tag
pictureIMG.parentNode.removeChild(pictureIMG);

// add image to #placeA element
placeA.appendChild(newIMG);

---

看起来很合理，谢谢！但是，接下来。。。阿格，我不确定。

// references to on-page elements
var placeA = document.getElementById('placeA');
var pictureIMG = document.querySelector('picture img');

// save image file location into a variable
var pictureIMGsrc = pictureIMG.src;

// create a image element with this src
var newIMG = document.createElement('img');
newIMG.src = pictureIMGsrc;

// remove image from picture tag
pictureIMG.parentNode.removeChild(pictureIMG);

// add image to #placeA element
placeA.appendChild(newIMG);