用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将json对象添加为属性（而不是var $div = $("<div>", ss); ）

Answer 1

通常，我通常不会为一个通用问题编写所有这些代码，但这一次让我很感兴趣。

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

码：

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/

Answer 2

JavaScript没有创建HTML元素的本地功能（所有功能都来自DOM API）。

浏览器提供的DOM API没有本机功能，无法获取具有描述属性的一堆属性的对象，并使用它们在元素上创建属性。

您将需要遍历该对象并依次处理每个属性（可以通过调用setAttribute来完成，但是在示例代码中需要对css和dataa进行特殊处理）。

Answer 3

我认为您想以纯JS形式执行相同的操作。 为此，请参见下面的代码-

for(var prop in ss) { // iterates over each property of ss object
    div.setAttribute(prop, ss[prop]); // sets an attribute on the div element, first parameter is attr name and second one is its value
}

但是，唯一的问题将是作为对象的CSS属性。 其他的将在使用jQuery时应用。

更新：我已经找到了解决方法。 见下文 -

for(var prop in ss) {
    if(typeof ss[prop] !== 'object') { // confirms property is NOT an object
    div.setAttribute(prop, ss[prop]);
    }
    else { // if the property is object
        div.setAttribute(prop, '');
        var val = '';
        for(var p in ss[prop]) { // iterate through the properties of the object
            val += p+":"+ss[prop][p]+';'; // concatenate them all in one
        }
        div.setAttribute(prop, val); // and finally set the attribute
    }
}

这是工作示例 （使用Pure JS）。

完整摘要：

 var ss = { id: "foo", class: "attack", dataa: "hhh", style: { "color": "red", "font-size": "50px" } }; var div = document.createElement('div'); div.innerHTML = 'dsdf'; for (var prop in ss) { if (typeof ss[prop] !== 'object') { div.setAttribute(prop, ss[prop]); } else { div.setAttribute(prop, ''); var val = ''; for (var p in ss[prop]) { val += p + ":" + ss[prop][p] + ';'; } div.setAttribute(prop, val); } } document.body.appendChild(div); 

Answer 4

小提琴演示

将属性添加到元素的javascript方法是使用setAttribute方法，而使用javascript创建element是使用createElement并且下面的方法将提供setAttribute的重载选项，您可以将其作为object获取：

function setAttributes(el, attrs) {
  for(var key in attrs) {
     if(key=="css") //if attribute is to set Style and since you are using it as CSS
     {
        for(var key1 in attrs[key]) //loop through each properties inside that CSS object
        {
            el.style[key1] = attrs[key][key1] //set Element Style
        }
     }
     else
         el.setAttribute(key, attrs[key]); //else just set Attribute
  }
}

以下是上述代码的完整javascript版本

 $(document).ready(function() { var ss = { id: "foo", class: "attack", dataa: "hhh", css: { "color": "red", } }; var $div = document.createElement('div'); //Create element console.log($div); setAttributes($div,ss); //use our custom Attribute setting function $div.innerHTML="dfg"; document.getElementsByTagName('body')[0].appendChild($div) }); function setAttributes(el, attrs) { for(var key in attrs) { if(key=="css") { for(var key1 in attrs[key]) { el.style[key1] = attrs[key][key1] } } else el.setAttribute(key, attrs[key]); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

现在，即使您要替换$(document).ready也可以用与其等价的javascript function替换它，如下所示：

(function() {
   // Code placed in document.ready
})();

您可以检查console中设置为新Element属性

Answer 5

您可以创建用于添加元素的函数：

function createElement(element, attributes, innerHtml, parent) {
    element = element || 'div';
    attributes = attributes || {};
    innerHtml = innerHtml || '';
    parent = parent || document.body;

    var elem = document.createElement(element);
    elem.innerHTML = innerHtml;
    for(var attr in attributes) {
        elem.setAttribute(attr, attributes[attr]);
    }
    parent.appendChild(elem);
}

createElement('div', {
    id: "foo",
    class: "attack",
    dataa: "hhh",
    css: {
        "color": "red"
    }
})

http://jsfiddle.net/rtbpn6vy/1/