如何在 JavaScript 中创建带有数据值的 DOM 元素？

问题描述 投票：0回答：2

我有一个网站，其中一些基本信息是用 JavaScript 输出的。我无法访问服务器端 - 我想知道是否可以使用 jQuery/Vanilla JS 使用该脚本中的值创建 DOM 元素？

脚本如下所示：

var retailerData = {
    "del": {
        "zip": "",
        "city": ""
    },
    "user": {
        "country": "Denmark",
        "phone": "0000",
        "nbrOrders": 0,
        "name": "John doe",
        "salesPerson": "Frederik Jensen",
        "customerNo": "5464564564",
        "email": "[email protected]"
    },
    "order": {
        "shippingSum": 0.0,
        "orderno": "",
        "voucher": "",
        "currency": "",
        "orderVat": 0.0,
        "orderSum": 0.0,
        "items": []
    }
}
javascript jquery
2个回答
1
投票

小例子：

var retailerData = {"del":{"zip":"","city":""},"user":{"country":"Denmark","phone":"0000","nbrOrders":0,"name":"John doe","salesPerson":"Frederik Jensen","customerNo":"5464564564","email":"[email protected]"},"order":{"shippingSum":0.0,"orderno":"","voucher":"","currency":"","orderVat":0.0,"orderSum":0.0,"items":[]}}

var mainDiv = document.createElement("DIV");        
var text1 = document.createTextNode("User Details");  
var countryDiv = document.createElement("DIV");
var text2 = document.createTextNode("Country:");  
var text3 = document.createTextNode(retailerData.user.country);  

countryDiv.appendChild(text2)
countryDiv.appendChild(text3)
mainDiv.appendChild(text1);  
mainDiv.appendChild(countryDiv);
document.body.appendChild(mainDiv);
0
投票

创建 DOM 元素非常简单，只是非常明确，需要一些时间来适应。

在最基本的使用中，您需要三种方法：

  • createElement
    ：创建一个元素（例如
    <div>
    ）
  • createTextNode
    ：创建在元素中使用的文本内容
  • appendChild
    ：将 DOM 节点（例如元素或文本）添加到另一个节点

创建新元素始终是一个 

document
操作（过于简单化：
document
是网页的 HTML 树）。因此，您始终使用 
document.create*
，而这些元素的实际附加是通过应包含这些新创建的元素的元素完成的。

现在我已经提到了这些原生 DOM 方法，让我们使用它们并创建一个包含所有用户信息的无序列表。

var retailerData = {
    "del": {
        "zip": "",
        "city": ""
    },
    "user": {
        "country": "Denmark",
        "phone": "0000",
        "nbrOrders": 0,
        "name": "John doe",
        "salesPerson": "Frederik Jensen",
        "customerNo": "5464564564",
        "email": "[email protected]"
    },
    "order": {
        "shippingSum": 0.0,
        "orderno": "",
        "voucher": "",
        "currency": "",
        "orderVat": 0.0,
        "orderSum": 0.0,
        "items": []
    }
}

//  create an <ul> element and add it to the <body>
var ul = document.body.appendChild(document.createElement('ul')),
    key, li;

for (key in retailerData.user) {
  //  create a <li> element and add it to the <ul>
  li = ul.appendChild(document.createElement('li'));

  //  create a <span>, which is added to the <li> and immediately put text
  //  into it (appendChild returns the appended child), this practice is
  //  known as 'chaining'
  li.appendChild(document.createElement('span'))
    .appendChild(document.createTextNode(key));

  //  now add the value to the <li>, it will end up after the <span> we 
  //  created above
  li.appendChild(document.createTextNode(retailerData.user[key]));
}
li span {
  display: inline-block;
  width: 8em;
  font-style: italic;
}

var ul = document.body.appendChild(document.createElement('ul')),
    key, li;

for (key in retailerData.user) {
  li = ul.appendChild(document.createElement('li'));

  li.appendChild(document.createElement('span'))
    .appendChild(document.createTextNode(key));

  li.appendChild(document.createTextNode(retailerData.user[key]));
}

以上片段为工作小提琴

在 jQuery 中，语法更加方便（这也是它如此流行的原因之一）

var $ul = $('body').append('<ul>');

$.each(retailerData.user, function(key, value) {
    $ul.append('<li><span>' + key + '</span>' + value + '</li>');
});

一个工作小提琴演示 jQuery。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.