具有id的CreateElement?

时间:2012-02-23 23:15:56

标签: javascript jquery

我正在尝试修改此代码,以便为此div项目提供ID,但是我在google上找不到任何内容,并且idName不起作用。我读了一些关于追加的内容,但对于看似非常简单的任务来说,这似乎相当复杂,那么还有其他选择吗?谢谢:))

g=document.createElement('div'); g.className='tclose'; g.v=0;

8 个答案:

答案 0 :(得分:391)

您应该使用.setAttribute()方法:

g = document.createElement('div');
g.setAttribute("id", "Div1");

答案 1 :(得分:78)

您可以使用示例中的g.id = 'desiredId'来设置您创建的元素的ID。

答案 2 :(得分:51)

var g = document.createElement('div');
g.id = 'someId';

答案 3 :(得分:23)

您可以使用Element.setAttribute

示例:

g.setAttribute("id","yourId")

g.setAttribute("class","tclose")


这是我更好地做到这一点的功能:

function createElement(element, attribute, inner) {
  if (typeof(element) === "undefined") {
    return false;
  }
  if (typeof(inner) === "undefined") {
    inner = "";
  }
  var el = document.createElement(element);
  if (typeof(attribute) === 'object') {
    for (var key in attribute) {
      el.setAttribute(key, attribute[key]);
    }
  }
  if (!Array.isArray(inner)) {
    inner = [inner];
  }
  for (var k = 0; k < inner.length; k++) {
    if (inner[k].tagName) {
      el.appendChild(inner[k]);
    } else {
      el.appendChild(document.createTextNode(inner[k]));
    }
  }
  return el;
}

示例1:

createElement("div");

将返回此信息:

<div></div>

示例2:

createElement("a",{"href":"http://google.com","style":"color:#FFF;background:#333;"},"google");`

将返回此信息:

<a href="http://google.com" style="color:#FFF;background:#333;">google</a>

示例3:

var google = createElement("a",{"href":"http://google.com"},"google"),
    youtube = createElement("a",{"href":"http://youtube.com"},"youtube"),
    facebook = createElement("a",{"href":"http://facebook.com"},"facebook"),
    links_conteiner = createElement("div",{"id":"links"},[google,youtube,facebook]);

将返回此信息:

<div id="links">
    <a href="http://google.com">google</a>
    <a href="http://youtube.com">youtube</a>
    <a href="http://facebook.com">facebook</a>
</div>

您可以创建新元素并设置属性和附加子项

createElement("tag",{attr:val,attr:val},[element1,"some text",element2,element3,"or some text again :)"]);

attr或子元素没有限制

答案 4 :(得分:13)

为什么不用jQuery做这个?

var newDiv= $('<div/>', { id: 'foo', class: 'tclose'})

答案 5 :(得分:3)

var element = document.createElement('tagname');    

element.className= "classname";
element.id= "id";

尝试这个你想要的。

答案 6 :(得分:2)

我不确定您是否尝试设置ID以便在CSS中设置样式,但如果是这样的话,您也可以尝试:

var g = document.createElement('div');    

g.className= "g";

这将命名你的div,以便你可以定位它。

答案 7 :(得分:-1)

您还可以添加多个类:

div.classList.add("class1", "class2", "class3");

或:

div.className =“ class1 class2”;