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

最新推荐文章于 2022-11-07 14:15:21 发布

原创最新推荐文章于 2022-11-07 14:15:21 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #纵观千象 #每天进步一点点 #学习永无止境 #纯js

js 专栏收录该内容

123 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript编写代码动态加载DOM元素，并通过循环处理数据，将用户信息、帖子详情、评论等内容呈现到页面上，实现了页面的动态更新和交互功能。

部署运行你感兴趣的模型镜像

// 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);
}

您可能感兴趣的与本文相关的镜像