建立在一個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嵌套設置

回答

相關問題