如何使用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？

回答

相關問題