建立在一个div嵌套设置

我有一个嵌套的DIV结构（一个模式的一部分）的img寻找这样的：使用JavaScript（不使用jQuery的建立在一个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>

我想动态添加幻灯片（图片）），但似乎无法弄清楚如何。

我明白我必须创建一个'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);

来源

2017-03-16 Dimitri Vanhecke

你可以使用CSS来添加和维护你的形象。不需要添加div，只需创建一个div并编辑它的css。使用CSS背景图像也被认为是一种很好的做法，因为它会自动预先加载图像。 –

代码工作，问题是出在你调用图像的方式。您的项目图像的路径不正确，这就是为什么你无法看到任何图像。

请检查此示例（您的代码），但图像来自一些外部链接。

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>

来源

2017-03-16 22:17:12 Nicholas

建立在一个div嵌套设置

回答

相关问题