1、第一种方式
createHtmlCommonFun() {
let waterfallLeft = document.getElementById('waterfallLeft'),
waterfallRight = document.getElementById('waterfallRight'),
_domLeft = document.createElement('div'),
_domRight = document.createElement('div'),
htmlLeft = "",
htmlRight = "",
html = '';
const {dataList} = this.state;
dataList.forEach(function (item, index) {
html = `
<div class="imgListWrap">
<div class="pic">
<div class="imgBox">
<img alt="列表图片" src="${item.icon}" class='larry_waterfall_img' />
</div>
<p class="title">${item[`title_${item.lang}`]}</p>
<div class="price">¥ ${item.list_price_cny.toFixed(2)}</div>
<div class="from">${item.site.toUpperCase()}</div>
</div>
</div>
`;
if (index % 2 === 0) {
htmlLeft += html;
} else {
htmlRight += html;
}
});
_domLeft.innerHTML = htmlLeft;
_domRight.innerHTML = htmlRight;
// _domLeft.innerHTML = htmlLeft.replace( /(\{.+?\})/g, function($1){ return data[ $1.slice( 1, $1.length-1 ) ] } );
waterfallLeft.appendChild(_domLeft);
waterfallRight.appendChild(_domRight);
}
2、第二种方式
createElementCommonFun(dataList, that) {
let waterfallLeft = document.getElementById('waterfallLeft'),
waterfallRight = document.getElementById('waterfallRight'),
fragLeft = document.createDocumentFragment(),
fragRight = document.createDocumentFragment(),
oBox = null,
oPic = null,
oImgBox = null,
oImg = null,
oTitle = null,
oPrice = null,
oFrom = null;
for (let i = 0; i < dataList.length; i++) {
oBox = document.createElement('div');
oPic = document.createElement('div');
oImgBox = document.createElement('div');
oImg = document.createElement('img');
oTitle = document.createElement('p');
oPrice = document.createElement('div');
oFrom = document.createElement('div');
oBox.className = 'imgListWrap';
oBox.onclick = that._handleGoodsDetail.bind(this, dataList[i]);
if (i % 2 === 0) {
fragLeft.appendChild(oBox);
} else {
fragRight.appendChild(oBox)
}
oPic.className = 'pic';
oBox.appendChild(oPic);
// 图片盒子
oImgBox.className = 'imgBox';
oPic.appendChild(oImgBox);
oImg.setAttribute('src', dataList[i].icon);
oImg.className = 'larry_waterfall_img';
oImgBox.appendChild(oImg);
// 标题
oTitle.className = 'title';
oTitle.innerText = dataList[i][`title_${dataList[i].lang}`];
oPic.appendChild(oTitle);
// 价格
oPrice.className = 'price';
oPrice.innerText = `¥ ${dataList[i].list_price_cny.toFixed(2)}`;
oPic.appendChild(oPrice);
// 地址
oFrom.className = 'from';
oFrom.innerText = dataList[i].site.toUpperCase();
oPic.appendChild(oFrom);
}
waterfallLeft.appendChild(fragLeft);
waterfallRight.appendChild(fragRight);
},