如何使用javascript将json对象附加到html正文中？（没有jQuery）

我的网站是用“content.json”文件编写的，所以我的html.index的正文是空的。目前，我可以在console.log中记录“script.js”中的所有元素，并且可以在console中看到我在“content.json”中声明的所有div。我的问题是如何将所有这些元素附加到html正文中，这样我就可以看到我用json编写的所有div了

我使用递归从.json和console.log获取所有这些元素。 这是我的json文件以防万一

将元素附加到

---

基于您的JSON结构，我将这样做。 我只是没有加载JSON文件，因为您已经这么做了，所以没有问题

/**数据下面的代码**/ 常量JSON_数据={ 类型:div， 类名：container， 内容： [{ 类型：标题， 内容： [{ 类型:div， 类名：logo， 内容： [{ 类型：img， alt:logo， src:images/logo.png }] }, { 类型:div， id:reg_btn， 内容： [{ 类型：span }, { 类型：按钮， id:注册 }] }, { 类型：导航， 类名：桌面， id：菜单容器， 内容： [{ 类型：ul， id:菜单， 内容： [{ 类型:李,， 内容：[{ 类型：a， href:,， innerHTML：主页 }] }, { 类型:李,， 内容：[{ 类型：a， href:,， innerHTML：产品 }] }, { 类型:李,， 内容：[{ 类型：a， href:,， innerHTML：模板 }] }, { 类型:李,， 内容：[{ 类型：a， href:,， innerHTML：定价 }] }] }] }, { 类型：导航， 类名：移动菜单， 内容： [{ 类型：标签， innerHTML：菜单 }, { 类型：ul， id：移动菜单项， 内容： [{ 类型:李,， 内容：[{ 类型：a， href:,， innerHTML：主页 }] }, { 类型:李,， 内容：[{ 类型：a， href:,， innerHTML：产品 }] }, { 类型:李,， 内容：[{ 类型：a， href:,， innerHTML：模板 }] }, { 类型:李,， 内容：[{ 类型：a， href:,， innerHTML：定价 }] }] }] }] }, { 类型：节， 内容： [{ 类型:div， id:滑块， 内容： [{ 类型:div， id：滑块内容， 内容： [{ 类型：文章， 类名：mySlides， 内容： [{ 类型：span， id:U标题， innerHTML：创建惊人的虚拟媒体 }, { 类型：p， innerHTML：为你的广告、社交媒体、博客和网站创建时尚视频和图片的超级简单工具，让你的项目脱颖而出！ }] }] }, { 类型:div， id:按钮， 内容： [{ 类型：按钮， 类名：slider\u btn }, { 类型：按钮， 类名：slider\u btn }, { 类型：按钮， 类名：slider\u btn }, { 类型：按钮， 类名：slider\u btn }] }, { 类型:div， id:Design_btn， 内容： [{ 类型：按钮， id：设计内容， innerHTML：创建按钮&8594 }] }] }] }] }; /**代码逻辑从这里开始**/ 让电流=零； const createFirstElement=数据=>{ 设el=document.createElementdata.type； iftypeof data.className==='string'el.className=data.className； iftypeof data.id==='string'el.id=data.id； iftypeof data.src==='string'{ el.src=data.src； el.alt=data.alt； } document.body.appendChildel； 电流=el； iftypeof data.content==“对象” data.content.forEachcontent=>createElementcontent，el； } const createElement=数据，父项=>{ 设el=document.createElementdata.type； iftypeof data.className==='string'el.className=data.className； iftypeof data.id==='string'el.id=data.id； iftypeof data.src==='string'{ el.src=data.src； el.alt=data.alt； } ifparent！==未定义的parent.appendChildel； else-current.appendChildel； iftypeof data.content==“对象”{ //电流=el； data.content.forEach content=>createElementcontent，el； }否则{ 如果type of data.innerHTML=='string'el.innerHTML=data.innerHTML； } } //loopDataJSON_数据；

---

createFirstElementJSON_数据 事实上，古盖迪德和昆廷的回答都毫无意义。 此方法对于任何json树都必须是通用的。 我不会回答如何解决问题，因为这似乎是一项学术任务。 我可以给你一些解决问题的提示：

您需要在onload事件中初始化您的请求 recurseJSON函数可能缺少一个参数，该参数将解析父元素，其他递归迭代将附加到父元素

---

顺便说一句，您可以使用这种方法，但它需要一些修改，因为我想您不想使用任何库。

您不只是将HTML编写为HTML有什么特殊原因吗？为什么要先解决JSON问题，然后编写自己的HTML解析器？如果网站的多个共享部分来自json，那么这是有道理的，但整个页面都是json？@gil关键是不要使用jsonjQuery@Shilly我目前正在学习json，所以我的目标是基于json结构使用json创建网站，这段代码将无法工作，因为它会将所有内容附加到主体中。必须将子项添加到父容器中，而不是主体中。@gugateider是的，我注意到了that@gugateider知道如何将每个孩子附加到父母身上吗？@Oskar-都一样。要添加到的元素。要添加到的元素_append@Quentin是的，但是如何获取将附加子元素的父元素？

function loadJSON(callback) {
    var req = new XMLHttpRequest();
    req.overrideMimeType('application/json');
    req.open('GET', 'https://api.myjson.com/bins/ohp3s', true); // myjson.com url
    req.onreadystatechange = 
    function() {
        if (req.readyState == 4 && req.status == "200") {
            callback(req.responseText);
        }
    };
    req.send(null);  
}
function get(data){
    el = document.createElement(data.type);

    if(typeof el.id === 'string'){
        el.id = data.id;
    }
    if(typeof el.className === 'string'){
        el.className = data.className;
    }        
    if(typeof el.src === 'string'){
        el.src = data.src;
    }
    if(typeof el.href === 'string'){
        el.href = data.href;
    }
    if(typeof el.innerHTML === 'string'){
        el.innerHTML = data.innerHTML;
    }
    if(typeof el.alt === 'string'){
        el.alt = data.alt;
    }

    return el;
}
function recurseJSON(data){
    for(let i of data.content) {
        console.log(get(i));
        if (typeof i.content === 'object'){
           recurseJSON(i);
        }
    }
}
function initJSON() {
    loadJSON(function(res) {
        recurseJSON(JSON.parse(res));
    });
}
initJSON();

document.body.appendChild(get(i));