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

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

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

var dataList = [
    {
        state: 2,    //  0:sharing  1:unJoin  2:sharingEnd
        name: '客户1',
        phone: 13675896031
    },
    {
        state: 1,    //  0:sharing  1:unJoin  2:sharingEnd
        name: '客户2',
        phone: 13675896032
    },
    {
        state: 2,    //  0:sharing  1:unJoin  2:sharingEnd
        name: '客户3',
        phone: 13675896033
    },
    {
        state: 0,   //  0:sharing  1:unJoin  2:sharingEnd
        name: '客户4',
        phone: 13675896034
    },
    {
        state: 0,   //  0:sharing  1:unJoin  2:sharingEnd
        name: '客户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);

查看本栏目更多精彩内容：http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索datalist
， phone
， name
， state
， 对象javascript字面量
， 客户
javascript添加html
javascript 添加html、ajax动态加载html页面、java动态生成html页面、js动态生成html页面、html页面数据动态加载，以便于您获取更多的相关知识。