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，一个特殊情况是样式属性，在这种情况下构建一个字符串。

代码：

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

这是working example（使用Pure JS）。

完整片段：

＆＃13;

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);

＆＃13;

Answer 4

<强> Fiddle DEMO

向元素添加属性的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版本

＆＃13;

$(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]);
  }
}

＆＃13;

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

＆＃13;

现在，如果您想要替换$(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/

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

5 个答案: