JS動態寫入HTML代碼《變量，方法，函數多個入參拼接》

寫這篇文章，主要是想mark一下，由於JS動態生成HTML（這裏都默認是生成大段的HTML，而不是簡單的標籤元素），經常使用的兩種語法格式：

一種是es6的寫法，反撇，' `` '，在英文語法輸入狀態下，esc正下方的按鍵。可是這種語法存在兼容性的問題，我在移動端的項目中遇到過，使用JQuery，沒有使用框架。由於有一整個頁面都是使用JS動態生成的HTML，因此，在一款華爲手機自帶的瀏覽器中不識別 `` ，頁面空白。

另外一種是字符串拼接，可是這種方式，拼接方法及方法入參時特別特別特別的繁瑣，特別要注意單引號和雙引號的使用，在外層雙引號裏單雙引號，代碼以下：

goodsHtml +=
    '<div class="goods-list-line">' +
    '<div class="goods-show">' +
    '<img class="goods-img" alt="goodsImg" src=' +resGoodsInfo.logoUrl+ '>' +
    '<p class="goods-name small-text-style">' + resGoodsInfo.goodsName + '</p>' +
    '</div>' +
    '<div class="btn-line">' +
    '<div class="display-inline-block">' +
    "<button class='left-btn exchangeBtn display-inline-block button-style font-color-white'  id=exchangeId"+i+" onclick=lookUpBtnClick('"+ resGoodsInfo.goodsId +"','" + resGoodsInfo.cardId +"') >查看</button>"+
    '</div>' +
    '<div class="position-rel display-inline-block">' +
    "<button class='display-inline-block button-style font-color-white'  id=consignId"+i+" onclick=consignBtnClick('"+ resGoodsInfo.goodsId +"','" + resGoodsInfo.cardId +"') >回收</button>"+
    "<div class='recycle-price-text orange-color-text'>(得" + resGoodsInfo.recyclePrice + "元)</div>"+
    '</div>' +
    '</div>' +
    '</div>'

 

 

下面附上es6的格式：

goodsHtml +=
                    `<div class="goods-list-line">
    <div class="goods-show">
        <img class="goods-img" src="${resGoodsInfo.logoUrl}" alt="goodsImg">
        <p class="goods-name small-text-style">${resGoodsInfo.goodsName}</p>
    </div>
    <div class="btn-line">
        <div class="display-inline-block">
            <button id="exchangeId${i}" class=" left-btn exchangeBtn display-inline-block button-style font-color-white "
            onclick="lookUpBtnClick('${resGoodsInfo.goodsId}', '${resGoodsInfo.cardId}')" >查看</button>
        </div>
        <div class="position-rel display-inline-block" >
            <button id="consignId${i}" class=" display-inline-block button-style font-color-white"
            onclick="consignBtnClick('${resGoodsInfo.goodsId}', '${resGoodsInfo.cardId}')" >回收</button>
            <div class="recycle-price-text orange-color-text">(得${resGoodsInfo.recyclePrice}元)</div>
        </div>

    </div>
</div>`