Question

我想让div看起来像这样

<div>
     <div class="container">
         <div>
             <h1 class="head" stye="color:red'">Hello</h1>
             <p>This is Paragraph </p>
         </div>
         <p style="color:#888;">This is another, Paragraph</p>
     </div>
     <div>
          <p style="para">
     </div>
</div>

我想将其附加在

document.body.appendChild(elemt);

通过使用JSON之类的

var elemt = {
        tagName: 'div',
        tagAttribute: [],
        children: [div1, div2]
    };

var div1 = {
        tagName: 'div',
        tagAttribute: [{class:'container'}],
        children: [{
                  tagName: 'div',
                  tagAttribute: [],
                  children: [{tagName: 'h1',
                               tagAttribute: [{style:'color: red;'}, 
                                              {class:'head'}],
                               children: [],
                               text:'Hello'
                                   },                                
                             {tagName: 'p',
                             tagAttribute: [{style:'color:#888;'}],
                             children: [],
                             text:'This is Paragraph'
                            }]
                  },
                  {tagName: 'p',
                  tagAttribute: [],
                  children:[],
                  text: 'This is another, Paragraph'
                  }]
           }
var div2 = {
            tagName: 'div',
            tagAttribute: [],
            children: [{tagName: 'p',
                             tagAttribute: [{style:'color:#888;'}],
                             children: [],
                             text:'This is another, Paragraph'
                            }]
           }

向我展示纯JavaScript方法，我想要上面的HTML格式的JSON数组。

提出解决方案，如果您有其他解决方案，请在此处分享

如果有人拥有使用JSON创建的类似html元素的库，请在此处共享。

Answer 1

最简单的方法是使用递归。

该函数首先使用DOM API（pvariance）从JSON数据创建元素，然后遍历其子对象，将相同的函数递归应用于每个子对象。

这是您要查找的功能的示例

var div1 = {
    tagName: 'div',
    tagAttribute: [{class:'container'}],
    children: [{
              tagName: 'div',
              tagAttribute: [],
              children: [{tagName: 'h1',
                           tagAttribute: [{style:'color: red;'}, 
                                          {class:'head'}],
                           children: [],
                           text:'Hello'
                               },                                
                         {tagName: 'p',
                         tagAttribute: [{style:'color:#888;'}],
                         children: [],
                         text:'This is Paragraph'
                        }]
              },
              {tagName: 'p',
              tagAttribute: [],
              children:[],
              text: 'This is another, Paragraph'
              }]
       }
var div2 = {
        tagName: 'div',
        tagAttribute: [],
        children: [{tagName: 'p',
                         tagAttribute: [{style:'color:#888;'}],
                         children: [],
                         text:'This is another, Paragraph'
                        }]
       }
       
var elemt = {
    tagName: 'div',
    tagAttribute: [],
    children: [div1, div2]
};

function JSON2Node(data)
{
    let elem = document.createElement(data.tagName);
   
    for (let attribute of data.tagAttribute)
    {
        for (let name in attribute)
            elem.setAttribute(name, attribute[name]);
    }
    
    if (data.text)
        elem.appendChild(document.createTextNode(data.text));
    if (data.children)
    {
        for(let child of data.children)
            elem.appendChild(JSON2Node(child));
    }
    return elem;
}
console.log(JSON2Node(elemt));

Answer 2

这里，它使用递归函数使用JSON构建HTML。

const buildElement = (elem) => {
  let domElem = document.createElement(elem.tagName);
  elem.tagAttribute.forEach(a => {
    let attName = Object.getOwnPropertyNames(a)[0];
    let attValue = a[attName];
    domElem.setAttribute(attName, attValue);
  });
  if(elem.text) domElem.innerText = elem.text;
  elem.children.forEach(child => {
    domElem.appendChild(buildElement(child));
  });
  return domElem;
};

var div1 = {
  tagName: 'div',
  tagAttribute: [{
    class: 'container'
  }],
  children: [{
      tagName: 'div',
      tagAttribute: [],
      children: [{
          tagName: 'h1',
          tagAttribute: [{
              style: 'color: red;'
            },
            {
              class: 'head'
            }
          ],
          children: [],
          text: 'Hello'
        },
        {
          tagName: 'p',
          tagAttribute: [{
            style: 'color:#888;'
          }],
          children: [],
          text: 'This is Paragraph'
        }
      ]
    },
    {
      tagName: 'p',
      tagAttribute: [],
      children: [],
      text: 'This is another, Paragraph'
    }
  ]
}
var div2 = {
  tagName: 'div',
  tagAttribute: [],
  children: [{
    tagName: 'p',
    tagAttribute: [{
      style: 'color:#888;'
    }],
    children: [],
    text: 'This is another, Paragraph'
  }]
};

var elemt = {
  tagName: 'div',
  tagAttribute: [],
  children: [div1, div2]
};

document.body.appendChild(buildElement(elemt));

使用JSON数组添加带有appendChild的嵌套元素

2 个答案: