这是一个js代码片段,它一直给我带来问题。我试图用不同的动态生成的HTML标签附加2个img层,但浏览器拒绝正确呈现代码。所需的结果是
dropzone.append(img);
dropzone.append(imgIn);
附加2图像与不同的2索引,并在马赛克中这样做了数百次这里是一个链接到Android应用程序此代码是为https://www.webintoapp.com/store/107768
function hueChange() {
for(let image = 0; image < mosaicCount; image++) {
let screenWidth = window.innerWidth;
reader.addEventListener('loadend', () => {
let img = document.createElement('img');
let imgIn = document.createElement('imgIn');
img.setAttribute("id", image)
img.setAttribute("width", screenWidth/16 + "px")
imgIn.setAttribute("id", "imgIn" + image)
imgIn.setAttribute("width", screenWidth/16 + "px")
img.src = reader.result;
imgIn.src = reader.result;
dropzone.append(img); //this doesn't append
dropzone.append(imgIn); //this appends
3条答案
按热度按时间t1rydlwq1#
你可以只创建一个元素,并在追加时克隆它,然后更新原始元素并追加它。
70gysomp2#
不存在
imgIn
元素,因此该元素不会呈现。您应该为两个元素使用img
。您应该将循环放在事件侦听器中,而不是添加多个侦听器,它们都执行相同的操作。
nnsrf1az3#
第一个问题是你正在创建一个“自定义”元素,因为你正在创建一个带有“imgIn”的元素,所以它不会渲染和图像。
您可以使用cloneNode并更改id,这样就不必复制id。