は、私はこのように見て、ネストされたDIV構造（モーダルの一部を）持って

Question

を設定するネストされたdivの中のimgを設定：

<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

、問題はあなたがイメージを呼び出す方法です。プロジェクトの画像へのパスが正しくないため、画像が表示されません。

この例（あなたのコード）を確認してくださいが、画像はいくつかの外部リンクから来ています。あなたはあなたのイメージを追加し、維持するために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>