สร้างด้วย id หรือไม่


288

ฉันพยายามที่จะแก้ไขรหัสนี้เพื่อให้รหัส div รายการนี้ แต่ฉันไม่พบอะไรบน google และ idName ไม่ทำงาน ฉันอ่านอะไรบางอย่างเกี่ยวกับการผนวกแต่ดูเหมือนว่าค่อนข้างซับซ้อนสำหรับงานที่ดูเหมือนค่อนข้างง่ายดังนั้นจึงมีทางเลือกอื่นหรือไม่? ขอบคุณ :)

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

4
หรือคุณหมายถึงg.id = 'foo';อะไร
Šime Vidas

1
ตอนนี้ฉันรู้แล้วว่าฉันหมายถึงบันได :)
pufAmuf

3
การค้นหาของ Google นี้ให้ผลลัพธ์ที่สมเหตุสมผล
เฟลิกซ์ลิ่ง

คำตอบ:


522

คุณควรใช้.setAttribute()วิธีการ:

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

4
ด้วยรหัสนี้เรากำลังสร้างไม่เพียง แต่ ID องค์ประกอบ แต่ยังสำหรับคุณลักษณะทั้งหมดขององค์ประกอบ
เชียงใหม่

3
@Mai คุณอธิบายเพิ่มเติมได้ไหม? ฉันไม่เข้าใจประโยคนั้น
mystrdat

15
@ mystrdat ฉันคิดว่า Mai พยายามที่จะบอกว่า setAttribute () สามารถใช้เพื่อสร้างคุณสมบัติอื่น ๆ ขององค์ประกอบและไม่ใช่แค่ id
Chuck L

94

คุณสามารถใช้g.id = 'desiredId'จากตัวอย่างของคุณเพื่อตั้งค่า id ขององค์ประกอบที่คุณสร้างขึ้น


ฉันมักจะคิดว่าแอนเนอร์ที่มีโค้ดน้อยกว่าจะดีที่สุด ไม่สามารถถ่ายภาพเพิ่มเติมได้ ขอบคุณ.
m3nda


34

คุณสามารถใช้ได้ Element.setAttribute

ตัวอย่าง:

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

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


นี่คือหน้าที่ของฉันสำหรับการทำสิ่งนี้ให้ดีขึ้น:

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

ตัวอย่างที่ 1:

createElement("div");

จะส่งคืนสิ่งนี้:

<div></div>

ตัวอย่างที่ 2:

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

จะส่งคืนสิ่งนี้:

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

ตัวอย่างที่ 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]);

จะส่งคืนสิ่งนี้:

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

คุณสามารถสร้างองค์ประกอบใหม่และตั้งค่าคุณสมบัติและผนวกลูก ๆ

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

ไม่มีขีด จำกัด สำหรับองค์ประกอบ attr หรือลูก


7
ทำไมคุณต้องส่งแอตทริบิวต์ด้วยไวยากรณ์ของคุณเอง (ซึ่งคุณต้องแยกวิเคราะห์) เมื่อคุณสามารถใช้วัตถุมาตรฐานได้ นอกจากนี้หากคุณต้องการสร้างองค์ประกอบจำนวนมากคุณต้องมีระบบ templating [เช่นแฮนด์บาร์] และไม่ใช่ฟังก์ชั่นที่ซับซ้อน
moonwave99

3
ฟังก์ชั่นนี้เป็นหนึ่งในฟังก์ชั่นแรกของฉันและฉันไม่ได้คิดเกี่ยวกับการอัพเดต ฉันคิดว่าความคิดของคุณดีกว่าและฉันจะเปลี่ยนแน่นอน ขอบคุณสำหรับสิ่งนั้น.
Guja1501

7
ถึงแม้ว่าพวกเขาจะถูกต้องขอบคุณที่ให้ข้อมูลเพิ่มเติมและวิธีการอื่นเกี่ยวกับเรื่องนี้ ลึกซึ้งมาก
Fata1Err0r

15

ทำไมไม่ทำเช่นนี้กับ jQuery

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

7
ทุกคนไม่สามารถหรือต้องการใช้ jQuery แต่ถ้าเขาเขาก็สามารถทำ var g = $ ('<div id = "blah" class = "tclose">');
แบรดลีย์ Mountford

24
@BradleyMountford: เขาติดแท็กคำถามด้วย jQuery ฉันขอแนะนำวิธีแก้ปัญหา jQuery
Shyju

2
แม้ว่าข้อมูลจำเพาะจะไม่ห้ามการใช้คำหลักที่สงวนไว้เป็นชื่อคุณสมบัติ แต่ก็อาจจะดีกว่าถ้าใส่classเครื่องหมายคำพูด
เฟลิกซ์คลิง

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

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

ลองสิ่งนี้คุณต้องการ


4

ฉันไม่แน่ใจว่าคุณกำลังพยายามตั้งค่า ID เพื่อให้คุณสามารถจัดรูปแบบใน CSS แต่ถ้าเป็นกรณีที่คุณสามารถลอง:

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

g.className= "g";

และนั่นจะตั้งชื่อ div ของคุณเพื่อให้คุณสามารถกำหนดเป้าหมายได้

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.