使用javascript动态添加数据到 HTML 页面

使用javascript动态添加数据到 HTML 页面2014-09-19今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识，javascript 动态添加数据到 HTML 页面的问题。

【学习目标】有如下的一组数据通过 Ajax 传递过来：

var dataList = [{state: 2,//0:sharing1:unJoin2:sharingEndname: "客户1",phone: 13675896031},{state: 1,//0:sharing1:unJoin2:sharingEndname: "客户2",phone: 13675896032},{state: 2,//0:sharing1:unJoin2:sharingEndname: "客户3",phone: 13675896033},{state: 0, //0:sharing1:unJoin2:sharingEndname: "客户4",phone: 13675896034},{state: 0, //0:sharing1:unJoin2: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）;