用Javascript代替jquery从json创建dom元素

我使用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);
});

$（文档）.ready（函数（）{
变量ss={
id:“foo”，
职业：“攻击”，
dataa：“hhh”，
css:{
“颜色”：“红色”
}
};
变量$div=$（“”，ss）；
$div.html（“dfg”）；
$（“正文”）。追加（$div）；
});

---

是否有一种变通方法可以使用Javascript而不是jQuery（而不是

var$div=$（“”，ss）；

）将json对象添加为属性Javascript没有用于创建HTML元素的本机功能（这些都来自DOM API）

浏览器提供的domapi没有本机特性，无法获取具有一组描述属性的属性的对象，并使用这些属性在元素上创建属性

---

您需要在对象上循环并依次处理每个属性（您可以通过调用

setAttribute

来执行此操作，但您需要在示例代码中使用特殊情况

css

和

dataa

。

我认为您希望在纯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属性，它是一个对象。Rest other将在使用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
    }
}

下面是（使用纯JS）的示例

完整片段：

var-ss={
id:“foo”，
职业：“攻击”，
dataa：“hhh”，
风格：{
“颜色”：“红色”，
“字体大小”：“50px”
}
};
var div=document.createElement（'div'）；
div.innerHTML='dsdf'；
用于（ss中的var prop）{
如果（ss[prop]的类型！=='object'）{
div.setAttribute（prop，ss[prop]）；
}否则{
div.setAttribute（属性“”）；
var-val=''；
对于（ss[prop]中的var p）{
val+=p+“：“+ss[prop][p]+'；”；
}
div.setAttribute（属性、值）；
}
}
文件.正文.附件（div）

向元素添加属性的
javascript
方法是使用
setAttribute
方法，而
javascript
创建
元素的方法是使用
createElement
方法，下面的方法将提供一个重载选项来获取它
对象
：

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
版本


$（文档）.ready（函数（）{
变量ss={
id:“foo”，
职业：“攻击”，
dataa：“hhh”，
css:{
“颜色”：“红色”，
}
};
var$div=document.createElement（'div'）；//创建元素
控制台日志（$div）；
setAttributes（$div，ss）；//使用我们的自定义属性设置函数
$div.innerHTML=“dfg”；
document.getElementsByTagName（'body'）[0].appendChild（$div）
});
函数集合属性（el、ATTR）{
for（属性中的变量键）{
如果（键==“css”）
{
for（属性[key]中的var key1）
{
el.style[key1]=attrs[key][key1]
}
}
其他的
el.setAttribute（key，attrs[key]）；
}
}
通常我不会为一个一般性问题编写所有这些代码，但这次我很感兴趣

您可以循环使用对象属性，对于每个属性调用，一个特定的案例是样式属性，在本例中是构建一个字符串

代码：

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

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"
    }
})

。
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"
    }
})