jsのオブジェクトでのループ処理を行いたいですがうまくいかず var hoge = { key0: "01.jpg", key1: "02.jpg", key3: "03.jpg", }; Object.keys(hoge).forEach((key) => { console.log(key);// キー(key) console.log(hoge[key]);// 値(value) }); //img const elmImg = document.createElement("img"); elmImg.classList.add("sp-image"); elmImg.setAttribute('alt', Object.keys(hoge)); elmImg.src = "img/gallery/01.jpg"; document.querySelector('.sp-slide').appendChild(elmImg); document.querySelector('.sp-thumbnails').appendChild(elmImg); //pタグキャプション document.querySelector('.sp-slide').insertAdjacentHTML('beforeend','<p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-vertical="0" data-width="100%" data-show-transition="up">hogeのkey0、key1</p>'); ↓出力したいHTML <div class="slider-pro"> <div class="sp-slides"> <div class="sp-slide"> <img class="sp-image" src="img/gallery/01.jpg" alt="key0"> <p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-vertical="0" data-width="100%" data-show-transition="up">key0</p> </div> <div class="sp-slide"> <img class="sp-image" src="img/gallery/02.jpg" alt="key1"> <p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-vertical="0" data-width="100%" data-show-transition="up">key1</p> </div> </div> <div class="sp-thumbnails"> <img class="sp-thumbnail" src="img/gallery/01.jpg" alt="key0"> <img class="sp-thumbnail" src="img/gallery/02.jpg" alt="key0"> </div> </div>