使用 Javascript 而不是 jquery 从 json 创建 dom 元素

Question

我正在使用 jQuery 选择器创建元素。

$(document).ready(function() {
  var ss = {
    id: "foo",
    class: "attack",
    dataa: "hhh",
    css: {
      "color": "red"
    }
  };
  var $div = $("<div>", ss);
  $div.html("dfg");
  $("body").append($div);
});

是否有解决方法可以使用 Javascript 而不是 jQuery(而不是 var $div = $("<div>", ss); )将 json 对象添加为属性

Answer 1

通常我不会为一般问题编写所有这些代码，但这一次这引起了我的兴趣。

您可以循环遍历对象属性，并为每个属性调用 setAttribute ，一个特殊的情况是 style 属性，在这种情况下是构建一个字符串。

代码:

var ss = {
    id: "foo",
    class: "attack",
    dataa: "hhh",
    css: {
        "color": "red"
    }
};
var div = document.createElement("div");

function getStyle(o) {
    var retString="";
    for (var property in o) {
        if (o.hasOwnProperty(property)) {
            retString += property + ":" + o[property] + ";";
        }
    }
    return retString;
}

function addProps(e, o) {
    for (var property in o) {
        if (o.hasOwnProperty(property)) {
            if (property === 'css') {
                e.setAttribute("style", getStyle(o[property]));
            } else {
                e.setAttribute(property, o[property]);
            }
        }
    }
}

addProps(div, ss);

div.innerHTML = "dfg";

document.body.appendChild(div);

演示:http://jsfiddle.net/IrvinDominin/wuc439pv/