今天簡單的學習了一下有關對象字面量的定義和 javascript 如何取出對象字面量的值的知識，javascript 動態添加數據到 HTML 頁面的問題。

【學習目標】有如下的一組數據通過 Ajax 傳遞過來：

var dataList = [{state: 2, // 0:sharing 1:unJoin 2:sharingEndname: '客戶1',phone: 13675896031},{state: 1, // 0:sharing 1:unJoin 2:sharingEndname: '客戶2',phone: 13675896032},{state: 2, // 0:sharing 1:unJoin 2:sharingEndname: '客戶3',phone: 13675896033},{state: 0, // 0:sharing 1:unJoin 2:sharingEndname: '客戶4',phone: 13675896034},{state: 0, // 0:sharing 1:unJoin 2:sharingEndname: '客戶5',phone: 13675896035} ]

需要把這組數據動態的顯示到 HTML 頁面上，實現如下的效果：

【解決思路與方法】

DOM 結構和 CSS 樣式都已經定義好，但是在獲取 data 的值的時候遇到了困難。初學者不知道這個屬于哪個范圍的知識，于是便開始在網上到處尋找。Json 、數組，都簡單的翻閱了一下，在跑偏之前終于找到了問題所在的關鍵點。現總結如下：

我們之前看到的例子都是使用點標識符創建對象和成員的，例如：

var temp=document.getElementById('example');

使用對象字面量的方法更加簡單、方便、易懂，例如：

var myObj = {name:'Tiramisu',age:20,phoneNum:15265658952,myFunction:function(){} }

以上代碼等價于：

var myObj = {}; myObj.name = 'Tiramisu'; myObj.age = 20; myObj.phoneNum = 15265658952; myObj.myFunction = function(){};

對于給出的 data 可以看作一個數組，那么當我們訪問客戶一的屬性值的時候可以使用如下的語句：

var oName = dataList[0].name; var oState = dataList[0].state; var oPhone = dataList[0].phone; console.log(oName,oState,oPhone);

基本知識點整理完畢后開始解決目標問題。我要構建的 DOM 結構如下：

<div class="shareBox"><!-- 分享狀態 --><div class="shareState clearfix"><div class="shareSateList" id="shareSateList"><div class="item sharing"> <!-- 如需切換角標切換類名即可 sharing：分享中；unJoin：未加入；sharingEnd：已結束 --><div class="itemInfo"><p class="name">李四</p><p class="phone">15024490626</p><br/><p class="state"><a class="endShare" href="javascript:;">結束分享</a></p><p class="state"><a class="reShare" href="javascript:;">重新分享</a></p></div><div class="mark"></div> </div></div> </div> </div>

CSS 樣式如下：

/*分享狀態樣式*/ .shareBox .shareState{width: 900px;position: relative;overflow: hidden; } .shareBox .shareState .shareSateList{width: 910px; } .shareBox .shareState .mark{ /*分享狀態角標*/width: 57px;height: 52px;position: absolute;right: 0px;top: 0px;s } .shareBox .shareState .sharing .mark{ /*已分享*/background-image:url(../imgs/sharing.png);background-repeat: no-repeat; } .shareBox .shareState .unJoin .mark{ /*未加入*/background-image:url(../imgs/unJoin.png);background-repeat: no-repeat; } .shareBox .shareState .sharingEnd .mark{ /*已結束*/background-image:url(../imgs/sharingEnd.png);background-repeat: no-repeat; } .shareBox .shareState .item{ /*名片樣式*/width: 291px;height: 157px;float: left;border:1px solid #dfdfdf;margin-right: 10px;margin-bottom: 10px;position: relative; } .shareBox .shareState .item:hover{border:1px solid #F26426;cursor: pointer;background-image:url(../imgs/delete.png);background-repeat: no-repeat; } .shareBox .shareState .itemInfo{ position: absolute;top:33px;left: 68px; } .shareBox .shareState p.name{ /*名片姓名*/font-size: 24px; } .shareBox .shareState p.phone{ /*名片聯系方式*/font-size: 18px; } .shareBox .shareState p.state{ /*視頻分享狀態顯示*/color: #4857e3; } .shareBox .shareState p.state a{ /*視頻分享狀態顯示*/text-decoration: none; } .shareBox .shareState .sharing .itemInfo p.state a.reShare{display: none; } .shareBox .shareState .unJoin .itemInfo p.state a.reShare{display: none; } .shareBox .shareState .sharingEnd .itemInfo p.state a.endShare{display: none; }

接下來的任務便是動態的創建 DOM 并添加樣式。在這里我先后講兩種方法，第一種方法是自己寫的，比較低級，而且繁瑣，代碼易讀性不高。介于是自己辛辛苦苦寫出來的，就貼在這里了。代碼如下：

window.onload = function(){for(var i = 0;i < data.length;i ++){ var oShareStateList = document.getElementById('shareSateList');//為 shareSateList 新增子節點，即新添加一個名片var oAddItem = document.createElement('div'); if(data[i].state == 0){oAddItem.className = 'item sharing'; }if(data[i].state == 1){oAddItem.className = 'item unJoin'; }if(data[i].state == 2){oAddItem.className = 'item sharingEnd'; } oShareStateList.appendChild(oAddItem);//添加新增添的名片里的內容var oAddItemInfo = document.createElement('div');oAddItemInfo.className = 'itemInfo';oAddItem.appendChild(oAddItemInfo);//添加名字var oName = document.createElement('p');oName.className = 'name';oName.innerHTML = data[i].name;oAddItemInfo.appendChild(oName);//添加電話號碼var oPhone = document.createElement('p');oPhone.className = 'phone';oPhone.innerHTML = data[i].phone;oAddItemInfo.appendChild(oPhone);//添加換行var oBr = document.createElement('br');oAddItemInfo.appendChild(oBr);//添加狀態分享狀態var oState = document.createElement('p');oState.className = 'state';oAddItemInfo.appendChild(oState);var oA = document.createElement('a');oA.className = 'endShare';oA.innerHTML = '結束分享';oA.href = 'javascript:;';oState.appendChild(oA);var oState = document.createElement('p');oState.className = 'state';oAddItemInfo.appendChild(oState);var oA = document.createElement('a');oA.className = 'reShare';oA.innerHTML = '重新分享';oA.href = 'javascript:;';oState.appendChild(oA);//添分享狀態角標var oMark = document.createElement('div');oMark.className = 'mark';oAddItem.appendChild(oMark);} }

第二種方法是同事建議的代碼，不僅簡潔美觀，而且代碼易讀性高，值得很好的學習借鑒。代碼如下：

var oShareStateList = document.getElementById('shareSateList'),tmp = ['<div class="itemInfo">','<p class="name">{name}</p>','<p class="phone">{phone}</p><br/>','<p class="state"><a class="endShare" href="javascript:;">結束分享</a></p>','<p class="state"><a class="reShare" href="javascript:;">重新分享</a></p>','</div>','<div class="mark"></div>'].join(''),state = ['sharing', 'unJoin', 'sharingEnd'];function fetchData(){//異步獲取數據//if( succes ){} renderAll( dataList );}function renderAll( datas ){var data;while( data = datas.shift() ){render( data );}} function render( data ){var _dom = document.createElement( 'div' );_dom.setAttribute( 'class', 'item ' + state[ data.state ] );_dom.innerHTML = tmp.replace( /(\{.+?\})/g, function($1){ return data[ $1.slice( 1, $1.length-1 ) ] } );document.getElementById('shareSateList').appendChild( _dom );}setTimeout( fetchData, 100 );

【相關知識點】

這些代碼涉及到如下的幾個知識點：

1.JavaScript shift() 方法 ：shift() 方法用于把數組的第一個元素從其中刪除，并返回第一個元素的值。

2.JavaScript slice() 方法 ：slice() 方法可提取字符串的某個部分，并以新的字符串返回被提取的部分。語法如下：

stringObject.slice(start,end)

? ? start 參數 ：要抽取的片斷的起始下標。

? ? end 參數 ：緊接著要抽取的片段的結尾的下標。

3.很重要也很適用的一條語句：

tmp.replace( /(\{.+?\})/g, function($1){ return data[ $1.slice( 1, $1.length-1 ) ] } );

【總結】

頭腦里要有面向對象編程的概念和習慣，一個函數里面的執行語句如果超過一定數量就要分出來做函數處理。

轉載于:https://www.cnblogs.com/guduoduo/p/3678368.html

總結

以上是生活随笔為你收集整理的【javascript 动态添加数据到 HTML 页面】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。