BuatElement dengan id?

288

Saya mencoba mengubah kode ini untuk juga memberikan ID item div ini, namun saya belum menemukan apa pun di google, dan idName tidak berfungsi. Saya membaca sesuatu tentang append , tetapi tampaknya cukup rumit untuk tugas yang tampaknya cukup sederhana, jadi apakah ada alternatif lain? Terima kasih :)

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

javascript jquery

— pufAmuf
sumber

4

Atau maksud Anda g.id = 'foo';?

— Šime Vidas

1

Saya sekarang tahu bahwa yang saya maksud adalah tangga :)

— pufAmuf

3

Pencarian Google ini menghasilkan beberapa hasil yang masuk akal.

— Felix Kling

522

Anda harus menggunakan .setAttribute()metode ini:

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

— lkaradashkov
sumber

4

Dengan kode ini, kami membuat tidak hanya ID elemen tetapi juga untuk semua atribut elemen.

— Mai

3

@ Mai Bisakah Anda jelaskan lebih lanjut? Saya tidak bisa mengerti kalimatnya.

— Mystrdat

15

@ mystrdat Saya pikir Mai sedang mencoba untuk mengatakan bahwa setAttribute () dapat digunakan untuk membuat atribut elemen lainnya dan bukan hanya id.

— Chuck L

94

Anda dapat menggunakan g.id = 'desiredId'dari contoh Anda untuk mengatur id elemen yang Anda buat.

— gddc
sumber

Saya selalu berpendapat bahwa annwer dengan kode lebih sedikit adalah yang terbaik. Tembakan lebih banyak tidak dimungkinkan. Terima kasih.

— m3nda

57

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

— Raina77ow
sumber

34

Kamu bisa memakai Element.setAttribute

Contoh:

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

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

Inilah fungsi saya untuk melakukan ini dengan lebih baik:

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

Contoh 1:

createElement("div");

akan mengembalikan ini:

<div></div>

Contoh 2:

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

akan mengembalikan ini:

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

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

akan mengembalikan ini:

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

Anda dapat membuat elemen baru dan mengatur atribut dan menambahkan anak

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

Tidak ada batasan untuk attr atau elemen anak

— Guja1501
sumber

6

Mengapa Anda akan meneruskan atribut dengan sintaks Anda sendiri [yang harus Anda uraikan], ketika Anda dapat menggunakan objek standar? Plus, jika Anda perlu membuat banyak elemen, Anda memerlukan sistem templating [mis. Setang] dan bukan fungsi yang terlalu rumit.

— moonwave99

3

Fungsi ini adalah salah satu yang pertama dari fungsi saya dan saya belum berpikir tentang pembaruan. Saya pikir ide Anda lebih baik dan saya pasti akan mengubahnya. Terima kasih untuk itu.

— Guja1501

7

Meskipun benar, terima kasih telah memberikan informasi tambahan dan cara alternatif untuk mengatasinya. Sangat mendalam.

— Fata1Err0r

15

Mengapa tidak melakukan ini dengan jQuery?

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

— Shyju
sumber

7

tidak semua orang bisa atau ingin menggunakan jQuery. Tetapi jika dia, dia hanya bisa melakukan var g = $ ('<div id = "blah" class = "tclose">');

— Bradley Mountford

24

@BradleyMountford: Dia menandai pertanyaan dengan jQuery. thay's saya menyarankan solusi jQuery

— Shyju

2

Meskipun spesifikasi tidak melarang penggunaan kata kunci yang dipesan sebagai nama properti, mungkin masih lebih baik untuk memasukkan classtanda kutip.

— Felix Kling

5

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

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

coba ini yang kamu mau.

— Lol Super
sumber

4

Saya tidak yakin apakah Anda mencoba menetapkan ID sehingga Anda dapat menatanya dalam CSS tetapi jika itu masalahnya, Anda juga dapat mencoba:

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

g.className= "g";

dan itu akan memberi nama div Anda sehingga Anda dapat menargetkannya.

— JLee365
sumber