Kimliğine sahip CreateElement?


288

Google'da bir şey bulamadım ve idName çalışmıyor, bu div öğesi bir kimlik vermek için bu kodu değiştirmeye çalışıyorum. Ekleme hakkında bir şeyler okudum , ancak oldukça basit görünen bir görev için oldukça karmaşık görünüyor, bu yüzden bir alternatif var mı? Teşekkürler :)

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

4
Yoksa demek istiyorsun g.id = 'foo';?
Šime Vidas

1
Şimdi merdiveni kastettiğimi biliyorum :)
pufAmuf

3
Bu Google araması bazı makul sonuçlar verir.
Felix Kling

Yanıtlar:


522

.setAttribute()Yöntemi kullanmalısınız :

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

4
Bu kodla, yalnızca öğe kimliğini değil, öğenin tüm nitelikleri için de yaratıyoruz.
Mai

3
@Mai Daha fazla açıklayabilir misiniz? Cümleyi anlayamıyorum.
mystrdat

15
@mystrdat Bence Mai setAttribute () 'in sadece id değil bir elementin diğer niteliklerini yaratmak için kullanılabileceğini söylemeye çalışıyor.
Chuck L

94

g.id = 'desiredId'Örneğinizden, oluşturduğunuz öğenin kimliğini ayarlamak için kullanabilirsiniz .


Ben her zaman daha az kod ile annwer en iyi şey. Daha fazla atış mümkün değil. Teşekkürler.
m3nda


34

Kullanabilirsiniz Element.setAttribute

Örnekler:

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

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


İşte bunu daha iyi yapmak için benim işlev:

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

Örnek 1:

createElement("div");

bunu döndürür:

<div></div>

Örnek 2:

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

bunu döndürür:

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

Örnek 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]);

bunu döndürür:

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

Yeni öğeler oluşturabilir ve nitelik (ler) ayarlayabilir ve alt öğe (ler) ekleyebilirsiniz

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

Attr veya alt eleman (lar) için sınır yoktur


7
Neden standart bir nesne kullanabileceğiniz zaman, öznitelikleri kendi sözdiziminizle [ayrıştırmanız gerekir] iletiyorsunuz? Ayrıca, çok fazla öğe oluşturmanız gerekirse, aşırı karmaşık işlevlere değil bir şablonlama sistemine [örneğin Gidonlar] ihtiyacınız vardır.
moonwave99

3
Bu işlev, işlevlerimdeki ilklerden biri ve güncellemeyi düşünmedim. Bence senin fikrin daha iyi ve kesinlikle değiştireceğim. Bunun için teşekkür ederim.
Guja1501

7
Her ne kadar haklı olsalar da, ek bilgi verdiğiniz ve bu konuda alternatif yollar sunduğunuz için teşekkür ederiz. Çok anlayışlı.
Fata1Err0r

15

Neden bunu jQuery ile yapmıyorsunuz?

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

7
herkes jQuery kullanamaz veya kullanmak istemez. Ama eğer öyleyse, sadece var g = $ ('<div id = "blah" class = "tclose">');
Bradley Mountford

24
@BradleyMountford: Soruyu jQuery ile etiketledi. thay ben bir jQuery çözüm önerdi
Shyju

2
Spesifikasyon, ayrılmış anahtar kelimelerin mülk adları olarak kullanılmasını yasaklamasa da class, tırnak işaretleri koymak daha iyi olabilir .
Felix Kling

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

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

İstediğinizi deneyin.


4

CSS'de stil oluşturabilmeniz için bir kimlik ayarlamaya çalıştığınızdan emin değilim, ancak bu durumda da deneyebilirsiniz:

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

g.className= "g";

ve bu da div'inizi adlandıracak, böylece hedefleyebilirsiniz.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.