Question

我有一个嵌套的DIV结构（模态的一部分），如下所示：

<div id="myModal" class="modal">
  <div id="myModalContent" class="modal-content">
    <div class="mySlides" id="mySlides1">
      <div class="numbertext1">1 / 5</div>
      <img src="clearmedium.JPG" id="S0Large" style="width:100%">
    </div>
  </div>
</div>

我想仅使用JavaScript（没有jQuery）动态添加幻灯片（图片），但似乎无法弄清楚如何。

我知道我必须创建一个'img'元素，给它一堆属性（src，id，...）和我称之为'text'元素并将它们都附加到父元素（modalDIVContent）。然后我应该将此DIV附加到文档中。似乎没有工作。结果是DIV中没有图像。没有其他错误。

我有：

var modalDIVContent = document.getElementById("myModalContent");
var innerDiv = document.createElement('div');
innerDiv.className = 'mySlides';
innerDiv.setAttribute("id", "mySlides" );        
modalDIVContent.appendChild(innerDiv);

var innertxt = document.createElement('div');
innertxt.setAttribute('class', 'numbertext');
innerDiv.appendChild(innertxt);
modalDIVContent.appendChild(innerDiv);

var innerImg = document.createElement('img');
innerImg.setAttribute('src', 'clearmedium.JPG');
innerImg.setAttribute('id', 'S1Large');
innerImg.style.width = "100%"
innerDiv.appendChild(innerImg);

Answer 1

代码有效，问题在于您调用图像的方式。项目图像的路径不正确，这就是您无法看到任何图像的原因。

请查看此示例（您的代码），但图片来自某些外部链接。

var modalDIVContent = document.getElementById("myModalContent");
var innerDiv = document.createElement('div');
innerDiv.className = 'mySlides';
innerDiv.setAttribute("id", "mySlides" );        
modalDIVContent.appendChild(innerDiv);

var innertxt = document.createElement('div');
innertxt.setAttribute('class', 'numbertext');
innerDiv.appendChild(innertxt);
modalDIVContent.appendChild(innerDiv);

var innerImg = document.createElement('img');
innerImg.setAttribute('src', 'https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg');
innerImg.setAttribute('id', 'S1Large');
innerImg.style.width = "100%"
innerDiv.appendChild(innerImg);

<div id="myModal" class="modal">
  <div id="myModalContent" class="modal-content">
    <div class="mySlides" id="mySlides1">
      <div class="numbertext1">1 / 5</div>
      <img src="http://www.clickgratis.com.br/fotos-imagens/foto/aHR0cDovL2UwMy1lbG11bmRvLnVlY2RuLmVzL2Fzc2V0cy9tdWx0aW1lZGlhL2ltYWdlbmVzLzIwMTUvMTEvMTMvMTQ0NzQzMDAxNTczMDIuanBn.jpg" id="S0Large" style="width:100%">
    </div>
  </div>
</div>

在嵌套div设置中设置img

1 个答案: