如何使用JavaScript动态创建div？

我想创建我的divs以访问我的JSON数据，并且每次创建新的div时都会显示。我通过我的JSON显示了我的第一个div显示信息。这是我走到这一步：如何使用JavaScript动态创建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)); 
 
    }); 
 
    })(); 
 
});

来源

2017-02-10 smith smith

使用立即调用的函数的Insead，使其实际上成为您调用的函数，因此您可以用不同的数据集重复调用它。只需添加一个要加载的数据的调用。就像这样：'function render（data）{.... return btn; }; ... {（data：['nombre'，'telefono']，pie：'texto'}）;'（高级ps：你也可以克隆节点，不需要p，_p，p_，__p，p__ ，_p_，-p-等等;）或者更好，创建一个createNode函数） – Shilly

我认为标题没有被用于这个问题，请为你的问题考虑一个更好的标题。 – SsouLlesS

我不知道，如果是做一个基本的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; 
});

来源

2017-02-10 17:12:45 Bc96

可以CRE吃了一个自定义函数来创建元素。例如：

// 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); 
// ...

来源

2017-02-10 19:05:23 ramabarca

如何使用JavaScript动态创建div？

回答

相关问题