CreateElement com id?

288

Estou tentando modificar esse código para também fornecer um ID a esse item div, no entanto, não encontrei nada no google e o idName não funciona. Eu li algo sobre anexar , no entanto, parece bastante complicado para uma tarefa que parece bastante simples, então existe uma alternativa? Obrigado :)

g=document.createElement('div'); g.className='tclose'; g.v=0;
pufAmuf
fonte
4
Ou você quer dizer g.id = 'foo';?
Šime Vidas
1
Agora eu sei que eu quis dizer a escada :)
pufAmuf
3
Esta pesquisa do Google retorna alguns resultados razoáveis.
Felix Kling 23/02

Respostas:

522

Você deve usar o .setAttribute()método:

g = document.createElement('div');
g.setAttribute("id", "Div1");
lkaradashkov
fonte
4
Com esse código, estamos criando não apenas o ID do elemento, mas também para todos os atributos do elemento.
Mai
3
@ Mai Você pode explicar mais? Não consigo entender a frase.
mystrdat
15
@mystrdat Acho que Mai está tentando dizer que setAttribute () pode ser usado para criar os outros atributos de um elemento e não apenas o ID.
mandril G
94

Você pode usar g.id = 'desiredId'no seu exemplo para definir o ID do elemento que você criou.

gddc
fonte
Eu sempre acho que o annwer com menos código é o melhor. Mais tiro não é possível. THX.
M3nda
57
var g = document.createElement('div');
g.id = 'someId';
raina77ow
fonte
34

Você pode usar Element.setAttribute

Exemplos:

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

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


Aqui está a minha função para fazer isso melhor:

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

Exemplo 1:

createElement("div");

retornará isso:

<div></div>

Exemplo 2:

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

retornará isso:

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

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

retornará isso:

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

Você pode criar novos elementos e definir atributo (s) e anexar filho (s)

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

Não há limite para attr ou filho (s) elemento (s)

Guja1501
fonte
6
Por que diabos você passaria os atributos com sua própria sintaxe [que você precisa analisar], quando você pode usar um objeto padrão? Além disso, se você precisar criar muitos elementos, precisará de um sistema de modelos [por exemplo, guidão] e não de funções complicadas demais.
precisa saber é o seguinte
3
Esta função é uma das primeiras das minhas funções e não pensei em atualizar. Eu acho que sua ideia é melhor e definitivamente mudarei. Obrigado por isso.
precisa saber é o seguinte
7
Embora estejam certos, obrigado por fornecer informações adicionais e maneiras alternativas de fazê-lo. Muito perspicaz.
Fata1Err0r 23/04
15

Por que não fazer isso com o jQuery?

var newDiv= $('<div/>', { id: 'foo', class: 'tclose'})
Shyju
fonte
7
nem todo mundo pode ou deseja usar o jQuery. Mas se ele fosse, ele poderia fazer var g = $ ('<div id = "blah" class = "tclose">');
Bradley Mountford
24
@ BradleyMountford: Ele marcou a pergunta com jQuery. thay é i sugeriu uma solução jQuery
Shyju
2
Embora a especificação não proíba o uso de palavras-chave reservadas como nomes de propriedades, ainda pode ser melhor colocar classaspas.
Felix Kling 24/02
5
var element = document.createElement('tagname');    

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

tente o que quiser.

Lol Super
fonte
4

Não tenho certeza se você está tentando definir um ID para poder estilizá-lo em CSS, mas se for esse o caso, você também pode tentar:

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

g.className= "g";

e isso nomeará sua div para que você possa segmentá-la.

JLee365
fonte