CreateElement mit ID?

288

Ich versuche, diesen Code zu ändern, um diesem div-Element auch eine ID zu geben. Ich habe jedoch bei Google nichts gefunden und idName funktioniert nicht. Ich habe etwas über Anhängen gelesen , aber es scheint ziemlich kompliziert für eine Aufgabe zu sein, die ziemlich einfach erscheint. Gibt es also eine Alternative? Vielen Dank :)

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

javascript jquery pufAmuf
quelle

4

Oder meinst du g.id = 'foo';?

Šime Vidas

1

Ich weiß jetzt, dass ich die Leiter meinte :)

pufAmuf

3

Diese Google-Suche liefert einige vernünftige Ergebnisse.

Felix Kling

522

Sie sollten die .setAttribute()Methode verwenden:

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

lkaradashkov
quelle

4

Mit diesem Code erstellen wir nicht nur die Element-ID, sondern auch für alle Attribute des Elements.

Mai

3

@Mai Kannst du das weiter erklären? Ich kann den Satz nicht verstehen.

Mystrdat

15

@mystrdat Ich denke, Mai versucht zu sagen, dass setAttribute () verwendet werden kann, um die anderen Attribute eines Elements und nicht nur die ID zu erstellen.

Chuck L

94

Sie können anhand g.id = 'desiredId'Ihres Beispiels die ID des von Ihnen erstellten Elements festlegen.

gddc
quelle

Ich denke immer, dass der Annwer mit weniger Code der beste ist. Mehr Schuss ist nicht möglich. Danke.

m3nda

57

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

raina77ow
quelle

34

Sie können verwenden Element.setAttribute

Beispiele:

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

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

Hier ist meine Funktion, um dies besser zu machen:

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

Beispiel 1:

createElement("div");

wird dies zurückgeben:

<div></div>

Beispiel 2:

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

wird dies zurückgeben:

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

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

wird dies zurückgeben:

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

Sie können neue Elemente erstellen, Attribute festlegen und untergeordnete Elemente anhängen.

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

Es gibt keine Begrenzung für attr oder untergeordnete Elemente.

Guja1501
quelle

6

Warum um alles in der Welt würden Sie die Attribute mit Ihrer eigenen Syntax übergeben [die Sie analysieren müssen], wenn Sie ein Standardobjekt verwenden können? Wenn Sie viele Elemente erstellen müssen, benötigen Sie außerdem ein Vorlagen-System (z. B. Lenker) und keine überkomplizierten Funktionen.

Moonwave99

3

Diese Funktion ist eine der ersten meiner Funktionen und ich habe nicht über eine Aktualisierung nachgedacht. Ich denke, deine Idee ist besser und ich werde sie definitiv ändern. Danke für das.

Guja1501

7

Obwohl sie Recht haben, danke für die Bereitstellung zusätzlicher Informationen und alternativer Vorgehensweisen. Sehr aufschlussreich.

Fata1Err0r

15

Warum nicht mit jQuery?

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

Shyju
quelle

7

Nicht jeder kann oder möchte jQuery verwenden. Aber wenn er es wäre, könnte er einfach var g = $ ('<div id = "blah" class = "tclose">') tun;

Bradley Mountford

24

@BradleyMountford: Er hat die Frage mit jQuery markiert. Ich schlug eine jQuery-Lösung vor

Shyju

2

Obwohl die Spezifikation die Verwendung reservierter Schlüsselwörter als Eigenschaftsnamen nicht verbietet, ist es möglicherweise besser, classAnführungszeichen zu setzen .

Felix Kling

5

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

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

versuchen Sie dies, was Sie wollen.

Lol Super
quelle

4

Ich bin mir nicht sicher, ob Sie versuchen, eine ID festzulegen, damit Sie sie in CSS formatieren können. Wenn dies jedoch der Fall ist, können Sie auch Folgendes versuchen:

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

g.className= "g";

und das wird dein div benennen, damit du es anvisieren kannst.

JLee365
quelle

CreateElement mit ID?

Antworten: