如何使用JavaScript動態創建div？

Question

我要創建我divs的方式來訪問我的JSON數據並顯示所有我創建一個新的每次div 。 我通過JSON獲得了第一個div顯示信息。 這是我到目前為止所得到的：

 document.addEventListener('DOMContentLoaded', function() { function function_name(data) { return {data: ['nombre','telefono'],pie: 'texto'}; } function _data(info) { return info; } (function() { var obj = { id: 'id', nombre: 'pepe', telefono: '6691296347' }; var body = document.getElementsByTagName('body')[0]; var div = document.createElement('div'); var p = document.createElement('p'); var span = document.createElement('span'); var _p = document.createElement('p'); var _span = document.createElement('span'); var btn = document.createElement('button'); var p_ = document.createElement('p'); var span_ = document.createElement('span'); p_.textContent = 'ID: '; div.appendChild(p_); p_.appendChild(span_); span_.textContent = obj.id; body.appendChild(div); data = JSON.stringify(_data(obj)); p.textContent = 'nombre: '; div.appendChild(p); p.appendChild(span); span.textContent = obj.nombre; _p.textContent = 'Telefono: '; div.appendChild(_p); _p.appendChild(_span); _span.textContent = obj.telefono; div.appendChild(btn); btn.textContent = 'button'; btn.setAttribute("id","id"); btn.addEventListener('click',function (e) { console.log(_data(obj)); }); })(); }); 

Answer 1

我不知道這是否是一種基本的JavaScript方法...但是我使用jquery將數據添加到每個新的div元素中

data = {"obj" : [{"name" : "John"}]}

返回對象的Json

$.each(data.obj, function(i, message){
    var htmlMessage = "";

    htmlMessage += "<div>";
    htmlMessage += "<p>";
    htmlMessage += "<span>";
    htmlMessage += message.name;
    htmlMessage += "</div>";
    htmlMessage += "</p>";
    htmlMessage += "</span>";

    $("#body")[0].innerHtml += htmlMessage;
});

Answer 2

您可以創建用於創建元素的自定義函數。 例如：

// creating elements function
function createEl(config){
    config = config || {};
    if(!config.type) throw new Error('config type required!');

    var new_el = document.createElement(config.type);
    // check text param
    if(config.text) new_el.textContent = config.text;

    // maybe check for other element attributes (id, class, etc)
    // ...

    return new_el;
}

// some code
// ...
var obj = {
    id: 'id',
    nombre: 'pepe',
    telefono: '6691296347'
};

var body = document.getElementsByTagName('body')[0];
var div = createEl({ type: 'div' });
var p = createEl({ type: 'p', text: 'nombre: '});
var span = createEl({ type: 'span', text: obj.nombre});
// other elements
// ...

// and then append
p.appendChild(span);    
div.appendChild(p);
body.appendChild(div);
// ...