JavaScript---动态的添加节点实现点赞页面点赞功能

动态的添加节点，添加效果如下右图（点赞页面）：

左图html代码如下：

  //引用bootstrap
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><body><div class="container"><div class="header"><input type="text" class="form-control" id="myInput" placeholder="请输入编号或标题"></div><div class="sperate-line"></div></div><div class="container"><div class="content"><h3 class="content-title">2019年优秀共产党员评选活动</h3><div class="row" id="row"><!-- 此处动态的添加图片展示区 --></div></div></div></div>
</body>

思路：给class="row"节点逐步添加子节点，主要包括图片和图片下方的文本区和点赞区

创建文本节点"11111" 的两种方法

（1）通过textContent

var p1 = document.createElement("p");

p1.textContent = "11111" ;

（2）通过createTextNode

var p1 = document.createElement("p");

var textP1 = document.createTextNode("11111" );

p1.appendChild(textP1);

第（1）中方法更简单

为相同class添加事件

注意涉及到imgLike[i]这个对象不能使用imgLike[i],要用this代替，this.nextSibling获取其兄弟节点，通过this.nextSibling.textContent设置imgLike[i]兄弟节点的值。

function doLike() {var imgLike = document.getElementsByClassName("title-right-like");for (var i = 0; i < imgLike.length; i++) {imgLike[i].onclick = function () {//注意涉及到这个对象不能使用imgLike[i],要用this代替this.src = "../images/like3.png";// 将点赞图片下方的p节点的文本值加1，通过nextSibling关联当前的点赞位置this.nextSibling.textContent = parseInt(this.nextSibling.textContent) + 1;};}}

javaScript动态添加实现代码：

 <script type="text/javascript">window.onload = function () {// d动态的添加content addContent();// 动态的添加contentfunction addContent() {var address = ["广东省深圳市", "湖北省武汉市", "江西省南昌市", "福建省厦门市", "湖北省武汉市", "广东省深圳市", "湖北省武汉市", "江西省南昌市", "福建省厦门市", "湖北省武汉市",]for (var i = 0; i < 10; i++) {// 获取节点class="row"var row = document.getElementsByClassName("row")[0];// 创建div元素节点，并设置其class="col-xs-6"var contentDiv = document.createElement('div');contentDiv.className = "col-xs-6";// 创建img节点,设置其src及classvar contentImg = document.createElement("img");contentImg.src = "../images/" + (i + 1) + ".jpg";contentImg.className = "img";// 1.创建title// 创建div元素节点，设置classvar titleDiv = document.createElement("div");titleDiv.className = "title";// 1.1创建title-left，设置classvar titleLeftDiv = document.createElement("div");titleLeftDiv.className = "title-left";// 创建p元素节点，设置文本内容，textContentvar p1 = document.createElement("p");p1.textContent = "编号:" + (i + 1);// var textP1 = document.createTextNode("编号:" + (i + 1));// p1.appendChild(textP1);// 创建p元素节点，设置文本内容，textContent，classvar p2 = document.createElement("p");var textP2 = document.createTextNode(address[i]);p2.appendChild(textP2);p2.className = "title-left-address";// 添加子节点titleLeftDiv.appendChild(p1);titleLeftDiv.appendChild(p2);// 1.2 创建title-rightvar titleRightDiv = document.createElement("div");titleRightDiv.className = "title-right";var titleRightImg = document.createElement("img");titleRightImg.src = "../images/like1.png";titleRightImg.className = "title-right-like";var p3 = document.createElement("p");p3.textContent = randomNum(1, 20);p3.className = "title-right-numLike";titleRightDiv.appendChild(titleRightImg);titleRightDiv.appendChild(p3);// 点赞功能titleRightImg.onclick = function () {this.src = "../images/like3.png";this.nextSibling.textContent = parseInt(this.nextSibling.textContent) + 1;}// 为titleDiv添加子节点titleDiv.appendChild(titleLeftDiv);titleDiv.appendChild(titleRightDiv);contentDiv.appendChild(contentImg);contentDiv.appendChild(titleDiv)row.appendChild(contentDiv);}}//生成从minNum到maxNum的随机数function randomNum(minNum, maxNum) {switch (arguments.length) {case 1:return parseInt(Math.random() * minNum + 1, 10);break;case 2:return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);break;default:return 0;break;}}}</script>

css样式代码

body{background: #ccc;padding: 5px;
}
/* header开始 */
.header{margin-top: 10px;background: #fad8dd;height: 56px;padding:10px;
}
.sperate-line{margin-top: 20px;border: 1;border-top: 1px solid rgb(182, 176, 176);
}
/* header。结束 */
/* content开始 */
.content-title{border-left: 6px solid #f61738;text-indent: 10px;font-size: 16px;font-weight: bold
}
.img{width: 100%;border-radius:10px; margin: 5px 0px;
}
.title{padding:5px 5px;
}
.title-left{float:left;padding-right: 10px;border-right: 1px solid #d8d2d2;line-height: 11px;
}
.title-left-address{font-size: 13px;color: #988f8f;
}
.title-right{float: right;margin-right: 15px;
}
.title-right-like{width: 22px;
}
.title-right-numLike{
margin-left: 10px;
}

JavaScript---动态的添加节点实现点赞页面点赞功能相关推荐

Asp.net(asp,jsp)+JavaScript动态实现添加数据行
在应用程序的开发中,有些输入信息是动态的,比如我们要注册一个员工的工作经历,比如下图如果做成死的,只能填写三个,如果是四个呢?或者更多呢,那不是添加不上去了吗,所以这样固然不好,我们可以用动态添加表 ...
如何用js实现简单的页面html动态加载（“看更多“/页面折叠功能）
关键: 使用document.createElement函数创建html元素滤清各元素父子关系并使用appendChild()函数将其联系下面给出两个示例代码: 示例代码一注意:该代码使用了Bo ...
【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
Dojo学习13 dijit.Tree 动态添加节点之一
为什么80%的码农都做不了架构师?>>> 13. dijit.Tree 动态添加节点之一对dijit.Tree研究了很久,源代码也看了好多遍了.对于fx这个类的研究还需要更深 ...
javaScript动态添加Li元素
html代码块 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
Splash抓取javaScript动态渲染页面
一.概述 Splash是一个javascript渲染服务.它是一个带有HTTP API的轻量级Web浏览器,使用Twisted和QT5在Python 3中实现.QT反应器用于使服务完全异步,允许通过Q ...
JavaScript 节点概述、父节点 parentNode、子节点children、兄弟节点、创建节点添加节点、删除节点、复制拷贝节点 ★案例★
一般节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性元素节点 nodeType 为 1 属性节点 nodeType 为 2 文本节 ...
treeview托拽和动态添加节点以及treeview和xml的交互的实现
前两天被winform的treeview搞晕了,现在终于有时间了,把自己用到的知识简单的写出来.供和我一样初用winform 的treeview的同志批评指正. 一.treeview的 ...