CreateElement con ID?

288

Sto cercando di modificare questo codice per assegnare un ID a questo elemento div, tuttavia non ho trovato nulla su Google e idName non funziona. Ho letto qualcosa sull'appendice , tuttavia sembra piuttosto complicato per un'attività che sembra piuttosto semplice, quindi esiste un'alternativa? Grazie :)

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

javascript jquery

— pufAmuf
fonte

4

O vuoi dire g.id = 'foo';?

— Šime Vidas,

1

Ora so che intendevo la scala :)

— pufAmuf

3

Questa ricerca su Google restituisce risultati ragionevoli.

— Felix Kling,

522

Dovresti usare il .setAttribute()metodo:

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

— lkaradashkov
fonte

4

Con questo codice, stiamo creando non solo l'ID elemento, ma anche per tutti gli attributi dell'elemento.

— Mai

3

@Mai Puoi spiegarci ulteriormente? Non riesco a capire la frase.

— mystrdat,

15

@mystrdat Penso che Mai stia cercando di dire che setAttribute () può essere usato per creare gli altri attributi di un elemento e non solo l'id.

— Chuck L

94

Puoi usare g.id = 'desiredId'dal tuo esempio per impostare l'id dell'elemento che hai creato.

— Dgcs
fonte

Ho sempre pensato che l'annwer con meno codice sia il migliore. Più colpo non è possibile. grazie.

— m3nda,

57

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

— raina77ow
fonte

34

Puoi usare Element.setAttribute

Esempi:

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

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

Ecco la mia funzione per farlo meglio:

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

Esempio 1:

createElement("div");

restituirà questo:

<div></div>

Esempio 2:

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

restituirà questo:

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

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

restituirà questo:

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

È possibile creare nuovi elementi e impostare gli attributi e aggiungere i figli

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

Non ci sono limiti per gli elementi attr o child

— Guja1501
fonte

7

Perché mai dovresti passare gli attributi con la tua sintassi [che devi analizzare], quando puoi usare un oggetto standard? Inoltre, se è necessario creare molti elementi, è necessario un sistema di template [ad esempio manubrio] e funzioni non complicate.

— moonwave99

3

Questa funzione è una delle prime delle mie funzioni e non ho pensato di aggiornare. Penso che la tua idea sia migliore e la cambierò sicuramente. Grazie per questo.

— Guja1501,

7

Anche se hanno ragione, grazie per aver fornito informazioni aggiuntive e modi alternativi di procedere. Molto perspicace.

— Fata1Err0r

15

Perché non farlo con jQuery?

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

— Shyju
fonte

7

non tutti possono o vogliono usare jQuery. Ma se lo fosse, potrebbe semplicemente fare var g = $ ('<div id = "blah" class = "tclose">');

— Bradley Mountford,

24

@BradleyMountford: ha taggato la domanda con jQuery. ho suggerito una soluzione jQuery

— Shyju,

2

Sebbene la specifica non proibisca l'uso di parole chiave riservate come nomi di proprietà, potrebbe essere comunque meglio inserire le classvirgolette.

— Felix Kling,

5

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

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

prova questo che vuoi.

— Lol Super
fonte

4

Non sono sicuro se stai cercando di impostare un ID in modo da poterlo definire in stile CSS, ma in questo caso puoi anche provare:

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

g.className= "g";

e questo nominerà il tuo div in modo da poterlo scegliere come target.

— JLee365
fonte