javascript - 将不同内容的多个元素附加到另一个 div

Question

我正在尝试将 2 个 div 附加到 1 个 div，但是我做不到。不管我怎么看我的代码，它似乎都是正确的。这是我尝试过的和做过的。

我正试图在 ionic css components 的帮助下完成这项工作

Transaction ID | Payload
-------------------------
    1          |  ABC
    2          |  CDE

HTML

<ion-view view-title="List of Transaction ID(s)">
    <ion-content scroll="false">
        <div class="row">
        </div>
    </ion-content>
</ion-view>

Javascript

$.ajax(settings1).done(function (response1) {
    var z = response1.transactions[0].uuid;
    var y = response1.transactions[0].payload;
    alert(z);
    alert(y);
    var row = document.createElement("div");
    row.className = "row";
    var col = document.createElement("div");
    var col1 = document.createElement("div");
    col.className = "col col-50";
    col1.className = "col col-50";
    col.innerHTML = document.createTextNode(z);
    col1.innerHTML = document.createTextNode(atob(y));
    row.appendChild(col);
    row.appendChild(col1);
});

Answer 1

据我所知，从数组中获取数据到 div 中的最简单方法是使用 ng-repeat。我假设您的交易 ID 列表如下所示:

"transactions":[
    {"transactionID":"1", "payload":"ABC"}, 
    {"transactionID":"2", "payload":"CDE"}, 
    {"transactionID":"3", "payload":"EFG"}
]

要轻松显示它，您可以使用 Angular 的 ng-repeat:

<div ng-repeat="transaction in transactions">
    <div class="row">
        {{transaction.transactionID}}
        {{transaction.payload}}
    </div>
</div>

您可以根据需要构建数据结构，但这会为您拥有的所有交易创建一个包含结构化数据的 div!