BETA

for文で順番に取り出してHTMLに組み込み画面に表示させる方法

投稿日:2020-07-01
最終更新:2020-07-03

innerHTMLはよくない

for (let i = 0; i < 10; i++) {  
    document.getElementById('id').innerHTML += i + '<br>';  
}  

このようにすれば0から9までの数字を順番に取り出して改行することは可能です。

しかしinnerHTMLに対して+=で上書きすると要素の中身をすべて新しくするということになるので他の機能(ボタンなど)が失われてしまうことがあります。

上の理由からinnerHTMLの代わりにinsertAdjacentHTMLを推奨します!

insertAdjacentHTMLを使おう

for (let i = 0; i <= 10; i++) {  
        document.getElementById("id").insertAdjacentHTML('beforeend', i + '<br>');  

このように書くと仮に他の要素があったとしても上書きすることはありません。

for (let i = 0; i <= response.length-1; i++) {  
        document.getElementById("id").insertAdjacentHTML('beforeend','<a href='+response[i].url+'>'+response[i].title+'</a><br>');  
    }  

配列からタイトルを取り出してリンクにしたいならこんな感じです。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

じゃーにゃりすとの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう