CreateElement z identyfikatorem?

288

Próbuję zmodyfikować ten kod, aby nadać temu elementowi div identyfikator, jednak nic nie znalazłem w google, a idName nie działa. Czytałem coś o append , ale wydaje się to dość skomplikowane w przypadku zadania, które wydaje się dość proste, więc czy jest alternatywa? Dzięki :)

g=document.createElement('div'); g.className='tclose'; g.v=0;
pufAmuf
źródło
4
Czy masz na myśli g.id = 'foo';?
Šime Vidas
1
Teraz wiem, że miałem na myśli drabinę :)
pufAmuf
3
Ta wyszukiwarka Google zwraca pewne rozsądne wyniki.
Felix Kling

Odpowiedzi:

522

Powinieneś użyć .setAttribute()metody:

g = document.createElement('div');
g.setAttribute("id", "Div1");
lkaradashkov
źródło
4
Za pomocą tego kodu tworzymy nie tylko identyfikator elementu, ale także dla wszystkich atrybutów elementu.
Mai,
3
@Mai Czy możesz wyjaśnić dalej? Nie rozumiem zdania.
mystrdat
15
@mystrdat Myślę, że Mai próbuje powiedzieć, że setAttribute () może być użyty do stworzenia innych atrybutów elementu, a nie tylko id.
Chuck L
94

Możesz użyć g.id = 'desiredId'swojego przykładu, aby ustawić identyfikator utworzonego elementu.

gddc
źródło
Zawsze uważam, że najlepsza jest reklama z mniejszym kodem. Więcej zdjęć nie jest możliwe. dzięki.
m3nda
57
var g = document.createElement('div');
g.id = 'someId';
raina77ow
źródło
34

Możesz użyć Element.setAttribute

Przykłady:

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

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


Oto moja funkcja do robienia tego lepiej:

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

Przykład 1:

createElement("div");

zwróci to:

<div></div>

Przykład 2:

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

zwróci to:

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

Przykład 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]);

zwróci to:

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

Możesz tworzyć nowe elementy i ustawiać atrybuty oraz dołączać dzieci

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

Nie ma ograniczeń dla elementów attr lub potomnych

Guja1501
źródło
7
Dlaczego na Ziemi miałbyś przekazywać atrybuty z własną składnią [którą musisz przeanalizować], skoro możesz użyć standardowego obiektu? Ponadto, jeśli chcesz utworzyć wiele elementów, potrzebujesz systemu szablonów [np. Kierownicy] i nie nadmiernie skomplikowanych funkcji.
moonwave99
3
Ta funkcja jest jedną z pierwszych z moich funkcji i nie myślałem o aktualizacji. Myślę, że twój pomysł jest lepszy i na pewno go zmienię. Dziękuję za to.
Guja1501
7
Chociaż mają rację, dziękuję za udzielenie dodatkowych informacji i alternatywne sposoby ich rozwiązania. Bardzo wnikliwy.
Fata1Err0r
15

Dlaczego nie zrobić tego z jQuery?

var newDiv= $('<div/>', { id: 'foo', class: 'tclose'})
Shyju
źródło
7
nie każdy może lub chce używać jQuery. Ale gdyby tak było, mógłby po prostu zrobić var ​​g = $ ('<div id = "blah" class = "tclose">');
Bradley Mountford
24
@BradleyMountford: Oznacził pytanie jQuery. sugerowałem rozwiązanie jQuery
Shyju
2
Chociaż specyfikacja nie zabrania używania zastrzeżonych słów kluczowych jako nazw właściwości, może być lepiej wstawić classcudzysłowy.
Felix Kling
5
var element = document.createElement('tagname');    

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

spróbuj tego, co chcesz.

Lol Super
źródło
4

Nie jestem pewien, czy próbujesz ustawić identyfikator, abyś mógł stylizować go w CSS, ale jeśli tak, możesz również spróbować:

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

g.className= "g";

i to nazwie twoją div, abyś mógł na nią celować.

JLee365
źródło