CreateElement con id?

288

Estoy tratando de modificar este código para también darle una identificación a este elemento div, sin embargo, no he encontrado nada en google y idName no funciona. Leí algo sobre append , sin embargo, parece bastante complicado para una tarea que parece bastante simple, entonces, ¿hay alguna alternativa? Gracias :)

g=document.createElement('div'); g.className='tclose'; g.v=0;
pufAmuf
fuente
44
¿O quieres decir g.id = 'foo';?
Šime Vidas
1
Ahora sé que me refería a la escalera :)
pufAmuf
3
Esta búsqueda en Google arroja algunos resultados razonables.
Felix Kling

Respuestas:

522

Deberías usar el .setAttribute()método:

g = document.createElement('div');
g.setAttribute("id", "Div1");
lkaradashkov
fuente
44
Con este código, estamos creando no solo la ID del elemento sino también para todos los atributos del elemento.
Mai
3
@Mai ¿Puedes explicar más? No puedo entender la oración.
mystrdat
15
@mystrdat Creo que Mai está tratando de decir que setAttribute () se puede usar para crear los otros atributos de un elemento y no solo la identificación.
Chuck L
94

Puede usar g.id = 'desiredId'su ejemplo para establecer la identificación del elemento que ha creado.

gddc
fuente
Siempre pienso que el annwer con menos código es el mejor. Más tiro no es posible. Gracias.
m3nda
57
var g = document.createElement('div');
g.id = 'someId';
raina77ow
fuente
34

Puedes usar Element.setAttribute

Ejemplos:

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

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


Aquí está mi función para hacerlo mejor:

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

Ejemplo 1:

createElement("div");

devolverá esto:

<div></div>

Ejemplo 2

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

devolverá esto:

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

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

devolverá esto:

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

Puede crear nuevos elementos y establecer atributos y agregar hijos.

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

No hay límite para attr o elemento (s) secundario (s)

Guja1501
fuente
66
¿Por qué pasarías los atributos con tu propia sintaxis [que tienes que analizar], cuando puedes usar un objeto estándar? Además, si necesita crear muchos elementos, necesita un sistema de plantillas [por ejemplo, manillares] y no funciones demasiado complicadas.
moonwave99
3
Esta función es una de las primeras de mis funciones y no he pensado en actualizarla. Creo que tu idea es mejor y definitivamente la cambiaré. Gracias por eso.
Guja1501
77
Aunque tienen razón, gracias por proporcionar información adicional y formas alternativas de hacerlo. Muy perspicaz.
Fata1Err0r
15

¿Por qué no hacer esto con jQuery?

var newDiv= $('<div/>', { id: 'foo', class: 'tclose'})
Shyju
fuente
77
no todos pueden o quieren usar jQuery. Pero si lo fuera, podría hacer var g = $ ('<div id = "blah" class = "tclose">');
Bradley Mountford
24
@BradleyMountford: etiquetó la pregunta con jQuery. Es paseíto me sugirió una solución jQuery
Shyju
2
Aunque la especificación no prohíbe el uso de palabras clave reservadas como nombres de propiedad, podría ser mejor poner classcomillas.
Felix Kling
5
var element = document.createElement('tagname');    

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

Prueba esto que quieras.

Lol Super
fuente
4

No estoy seguro de si está intentando establecer una ID para poder diseñarla en CSS, pero si ese es el caso, también puede intentarlo:

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

g.className= "g";

y eso nombrará tu div para que puedas apuntarlo.

JLee365
fuente