纯js循环添加dom html并动态绑定传参onclick事件

// js loop load dom
for (var k in data) {
	var v = data[k];
	detailTemplate = detailTemplate.cloneNode(true);

	var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0];
	userInfoObj.getElementsByClassName('name')[0].innerText = v.author;
	userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar;
	userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost;

	var titleObj = detailTemplate.getElementsByClassName('title')[0];
	titleObj.innerText = v.subject;

	var commentHtml = '';
	if (v.postlist.length > 0) {
	  for (var j in v.postlist) {
	    var vv = v.postlist[j];
	    commentHtml += '<div class="line"><i class="icon icon-quote"></i><span class="desc">' + vv.message + '</span></div>';
	  }
	}
	var commentObj = detailTemplate.getElementsByClassName('comment')[0];
	commentObj.innerHTML = commentHtml;

	var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0];
	extInfoObj.getElementsByClassName('from')[0].innerText = v.fname;
	extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views;

// 动态绑定click事件并传参
	(function(v) {
	  userInfoObj.onclick = function() {
	    loadPage('u', v.authorid);
	  };
	  titleObj.onclick = commentObj.onclick = function() {
	    loadPage('t', v.tid);
	  };
	  extInfoObj.onclick = function() {
	    loadPage('f', v.fid);
	  };
	})(v);

	postListObj.appendChild(detailTemplate);
}

 

更多实例应用扫码体验：