用于从 json 创建 dom 元素的 Javascript 而不是 jquery答案

【问题标题】：Javascript instead of jquery for creating dom elements from json用于从 json 创建 dom 元素的 Javascript 而不是 jquery
【发布时间】：2015-09-25 06:44:29
【问题描述】：

我正在使用 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 对象添加为属性

【问题讨论】：

You don't have any JSON there.

标签： javascript jquery json dom

【解决方案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/

【讨论】：

【解决方案2】：

JavaScript 没有用于创建 HTML 元素的原生特性（这些都来自 DOM API）。

浏览器提供的 DOM API 没有原生特性来获取具有一堆描述属性的属性的对象并使用它们在元素上创建属性。

您需要遍历对象并依次处理每个属性（您可以通过调用 setAttribute 来完成此操作，但您需要在示例代码中使用特殊情况 css 和 dataa）。

【讨论】：

【解决方案3】：

Fiddle DEMO

javascript 向元素添加属性的方法是使用setAttribute 方法，javascript 创建element 的方法是使用createElement，以下方法将为@987654327 提供重载选项@你把它取为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]);
  }
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

现在，如果您想替换 $(document).ready，您可以将其替换为 javascript 等效的 function，如下所示：

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

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

【讨论】：

【解决方案4】：

我认为你想以纯 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
    }
}

这里是working example（使用纯 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);

【讨论】：

【解决方案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/

【讨论】：