具有ID的CreateElement?


288

我正在尝试修改此代码,以便也为该div项目提供ID,但是我在Google上找不到任何内容,并且idName不起作用。我读了一些有关append的内容,但是对于看起来很简单的任务来说似乎很复杂,所以有替代方法吗?谢谢 :)

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

4
还是你的意思g.id = 'foo';
森那维达斯

1
我现在知道我的意思是梯子:)
pufAmuf

3
此Google搜索返回一些合理的结果。
Felix Kling '02

Answers:


520

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

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

4
使用此代码,我们不仅可以创建元素ID,还可以创建元素的所有属性。

3
@Mai您能进一步解释吗?我听不懂这句话。
mystrdat

15
@mystrdat我认为Mai试图说setAttribute()可用于创建元素的其他属性,而不仅仅是ID。
Chuck L

94

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


我总是认为代码较少的答案是最好的。无法拍摄更多照片。谢谢。
m3nda 2015年


34

您可以使用 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或子元素没有限制


6
为什么在地球上,当可以使用标准对象时,为什么要使用自己的语法(必须解析)传递属性?另外,如果您需要创建许多元素,则需要一个模板系统(例如,车把),而不是过于复杂的功能。
moonwave99 2014年

3
此功能是我的功能中的第一个,我还没有考虑过更新。我认为您的想法更好,我一定会改变它。谢谢你
Guja1501 2014年

7
尽管它们是正确的,但感谢您提供其他信息和替代方法。非常有见地。
Fata1Err0r 2015年

15

为什么不使用jQuery呢?

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

7
不是每个人都可以或想要使用jQuery。但是如果他是,他就可以做var g = $('<div id =“ blah” class =“ tclose”>');
布拉德利·芒特福德

24
@BradleyMountford:他用jQuery标记了这个问题。我建议一个jQuery解决方案
Shyju 2012年

2
尽管该规范并未禁止使用保留关键字作为属性名称,但class使用引号可能仍会更好。
Felix Kling 2012年

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

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

试试你想要的。


4

我不确定您是否要设置ID,以便可以在CSS中设置其样式,但是如果是这种情况,也可以尝试:

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

g.className= "g";

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.