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;

javascript jquery

— 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

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