动态的添加节点，添加效果如下右图（点赞页面）：
左图html代码如下：
//引用bootstrap<link rel="stylesheet" href="/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">优秀共产党员评选活动</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;}
