javascript - for循环创建多个元素？

Question

我正在我的网站上显示来自 Google Fusion Table 的数据。到目前为止，我可以将数据显示为 p 标签。

<p>Hotel Name</p>
<p>www.hotelwebsite.com</p>
<p>Hotel description</p>
<p>http://www.hotelwebsite.com/hotelimage.jpg</p>

但我想更改每个项目的元素类型。

<h2>Hotel Name</h2>
<a href="http://www.hotelwebsite.com">www.hotelwebsite.com</a>
<p>Hotel description</p>
<img src="http://www.hotelwebsite.com/hotelimage.jpg"/>

是否可以保留 for 循环，但创建可以设置不同样式的不同元素？

htmlTable.appendChild(tableRow);
for (var i = 0; i < resp.rows.length; i++) {
  var tableRow = document.createElement('div');

  for (var j = 0; j < resp.rows[i].length; j++) {
    var tableData = document.createElement('p');
    var content = document.createTextNode(resp.rows[i][j]);
    tableData.appendChild(content);
    tableRow.appendChild(tableData);
  }

JSFiddle:http://jsfiddle.net/alsjohnstone/LqmgcLa6/8/

Answer 1

每行有 4 列(名称、网站 url、描述、图像 url)，不是在每个单元格中递增，而是在每行中递增，根据需要应用列。

for (var i = 0; i < resp.columns.length; i++) {        
    var tableHeader = document.createElement('p');
    tableRow.appendChild(tableHeader);
    htmlTable.appendChild(tableRow);
    var tableRow = document.createElement('div');

    var tableData = document.createElement('h2');
    var content = document.createTextNode(resp.rows[i][0]); // hotel name
    tableData.appendChild(content);
    tableRow.appendChild(tableData);
    var tableData = document.createElement('a');
    tableData.setAttribute('src',resp.rows[i][1]); // website
    tableRow.appendChild(tableData);
    var tableHeader = document.createElement('p');
    tableRow.appendChild(tableHeader);
    var content = document.createTextNode(resp.rows[i][2]); // hotel description
    tableData.appendChild(content);
    tableRow.appendChild(tableData);
    var tableData = document.createElement('img');
    tableData.setAttribute('src',resp.rows[i][3]); // website
    tableRow.appendChild(tableData);
    htmlTable.appendChild(tableRow);
}
result.appendChild(htmlTable);

proof of concept fiddle

代码片段:

function dataHandler(resp) {
    console.log(resp);
    
    var result = document.getElementById('result');
    var htmlTable = document.createElement('div');
    
    var tableRow = document.createElement('div');
    for (var i = 0; i < resp.columns.length; i++) {        
        var tableHeader = document.createElement('p');
        tableRow.appendChild(tableHeader);
        htmlTable.appendChild(tableRow);
        var tableRow = document.createElement('div');

        var tableData = document.createElement('h2');
        var content = document.createTextNode(resp.rows[i][0]); // hotel name
        tableData.appendChild(content);
        tableRow.appendChild(tableData);
        var tableData = document.createElement('a');
        tableData.setAttribute('src',resp.rows[i][1]); // website
        tableRow.appendChild(tableData);
        var tableHeader = document.createElement('p');
        tableRow.appendChild(tableHeader);
        var content = document.createTextNode(resp.rows[i][2]); // hotel description
        tableData.appendChild(content);
        tableRow.appendChild(tableData);
        var tableData = document.createElement('img');
        tableData.setAttribute('src',resp.rows[i][3]); // website
        tableRow.appendChild(tableData);
        htmlTable.appendChild(tableRow);
    }
    result.appendChild(htmlTable);
}

function getData() {
    
    // Builds a Fusion Tables SQL query and hands the result to  dataHandler
    var queryUrlHead = 'https://www.googleapis.com/fusiontables/v1/query?sql=';
    var queryUrlTail = '&key=AIzaSyCMILeBTrsiwVnO9_SSJ4HYtzZl14dXdRA';
    var tableId = '1_wBUixHJqO_W95zMHk_eP8wQKBuXvHEfvNgfTBSC';

    // write your SQL as normal, then encode it
    var query = "SELECT 'Name', 'URL', 'Description', 'Image' FROM " + tableId + " ORDER BY ST_DISTANCE(Postcode, LATLNG(50.879311, 0.063803)) LIMIT 100; "
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

    var jqxhr = $.get(queryurl, dataHandler, "jsonp");
}

getData();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>