htmlメソッドだと出来ない理由

Question

appendメソッドを使えば、eachで繰り返し処理を実行できるのですが、htmlメソッドだと繰り返し処理が出来ません。
出来ないというのは、７回繰り返したいのですが、最後のjsonしか持ってくれずに、表示されてしまっている状態です。
それを、HTMLメソッドでやりたいのと、なぜそうなるのか理由も知りたいです。
そもそもhtmlメソッドは書き換える機能があるのでそうだとは思うのですが、納得ができないのでお力添えをしていただきたいです。

コード
.done(function(data) {
    $.each(data.colorsArray,function(){
      $('.colorList').append(
        $('<li>').addClass('colorList__item').append(
          $('<p>').addClass('colorList__title').css('background-color',$(this)[0].hexValue).text($(this)[0].colorName)
        )
      );
    });
  });

コード
.done(function(data) {
        console.log(data)
        var colorlist;
        $.each(data.colorsArray,function(){ 
          console.log(this)
          colorlist = '<li class="colorList__item">' + 
          '<p class="colorList__title" style="background-color: ' + this.hexValue + ';"> '+ this.colorName +'</p>'
          '</li>' 
        });

        $('.colorList').html(colorlist);
      });

Answer 1

+ が2つ足りない。

/*
          colorlist = '<li class="colorList__item">' + 
          '<p class="colorList__title" style="background-color: ' + this.hexValue + ';"> '+ this.colorName +'</p>'
          '</li>' 
*/          colorlist += '<li class="colorList__item">' + 
          '<p class="colorList__title" style="background-color: ' + this.hexValue + ';"> '+ this.colorName +'</p>'
          + '</li>' 

Comments

[wizard]

ありがとうございます。
申し訳ないのですが、+=にすることで上書きがかき消されるのでしょうか。どのような仕組みになっているのですか？

[kei344]

代入演算子です。
a += ''; は a = a + ''; と同じです。

【式と演算子 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators#Assignment_operators

[wizard]

ありがとうございます！
加算代入ですね。

Answer 2

下の方のコードでは、毎回colorlistを上書きしてしまっているので、ループを抜けた後には最後1回分しか残りません。

---

それを、HTMLメソッドでやりたいのと

使わなくて済むのであれば、.htmlメソッドは使わないほうがいいです。HTMLを直接コードから生成すると、意図しないJavaScriptを混ぜ込んで実行される、XSSという脆弱性の原因となります。

Comments

[wizard]

そうですよね。ただ、仕組みがイマイチわからず出ないことも無いだろうと思い試行錯誤していました。
ありがとうございます。

Answer 3

appendはHTML要素を生成する機能があるのに対し、htmlは既存のHTML要素の中身を書き換える機能しか持ちません。
今回の場合、なんらかの方法であらかじめHTML要素を７つ生成したうえで、それぞれの要素をhtmlメソッドで書き換えると実現可能かと思います。

＜追記＞
すみません、textメソッドと勘違いしていました。

Comments

[wizard]

丁寧な説明ありがとうございます。