具有id的CreateElement?

puf*_*muf 257 javascript jquery

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

g=document.createElement('div'); g.className='tclose'; g.v=0;
Run Code Online (Sandbox Code Playgroud)

lka*_*kov 447

你应该使用这个.setAttribute()方法:

g = document.createElement('div');
g.setAttribute("id", "Div1");
Run Code Online (Sandbox Code Playgroud)

  • 为什么这比 `g.id = "Div1")` 更好? (15认同)
  • @mystrdat我认为Mai试图说setAttribute()可以用来创建元素的其他属性而不仅仅是id. (9认同)
  • 使用此代码,我们不仅创建元素ID,还创建元素的所有属性. (3认同)
  • @Mai 你能进一步解释一下吗?我看不懂这句话。 (3认同)

g.d*_*d.c 83

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


rai*_*7ow 52

var g = document.createElement('div');
g.id = 'someId';
Run Code Online (Sandbox Code Playgroud)


Guj*_*501 28

您可以使用 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;
}
Run Code Online (Sandbox Code Playgroud)

例1:

createElement("div");
Run Code Online (Sandbox Code Playgroud)

将返回此:

<div></div>
Run Code Online (Sandbox Code Playgroud)

例2:

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

将返回此:

<a href="http://google.com" style="color:#FFF;background:#333;">google</a>
Run Code Online (Sandbox Code Playgroud)

例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]);
Run Code Online (Sandbox Code Playgroud)

将返回此:

<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>
Run Code Online (Sandbox Code Playgroud)

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

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

attr或子元素没有限制

  • 当您可以使用标准对象时,为什么在地球上会使用您自己的语法[必须解析]传递属性?另外,如果你需要创建很多元素,你需要一个模板系统[例如Handlebars]而不是过于复杂的功能. (6认同)
  • 虽然他们是对的,但感谢提供额外的信息和其他方法.非常有见地. (4认同)
  • 这个函数是我函数中的第一个函数,我没有考虑过更新.我认为你的想法更好,我肯定会改变它.谢谢你. (3认同)

Shy*_*yju 13

为什么不用jQuery呢?

var newDiv= $('<div/>', { id: 'foo', class: 'tclose'})
Run Code Online (Sandbox Code Playgroud)

  • @BradleyMountford:他用jQuery标记了这个问题.我建议使用jQuery解决方案 (22认同)
  • 不是每个人都可以或想要使用jQuery.但如果他是,他可以做var g = $('<div id ="blah"class ="tclose">'); (6认同)
  • 尽管规范并未禁止将保留关键字用作属性名称,但将"class"放在引号中仍然可能更好. (2认同)

小智 5

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

element.className= "classname";
element.id= "id";
Run Code Online (Sandbox Code Playgroud)

试试这个你想要的。


小智 5

这很简单,只需创建一个带有 id 的新元素:

var myCreatedElement = document.createElement("div");
var myContainer = document.getElementById("container");

//setAttribute() is used to create attributes or change it:
myCreatedElement.setAttribute("id","myId");

//here you add the element you created using appendChild()
myContainer.appendChild(myCreatedElement);
Run Code Online (Sandbox Code Playgroud)

就这些