ฉันจะเพิ่มแอตทริบิวต์“ href” ลงในลิงก์แบบไดนามิกโดยใช้ JavaScript ได้อย่างไร

95

ฉันจะเพิ่มhrefแอตทริบิวต์ลงในลิงก์แบบไดนามิกโดยใช้ JavaScript ได้อย่างไร

โดยพื้นฐานแล้วฉันต้องการเพิ่มhrefแอตทริบิวต์<a></a>แบบไดนามิก (กล่าวคือเมื่อผู้ใช้คลิกที่รูปภาพใดภาพหนึ่งในเว็บไซต์)

ดังนั้นจาก:

<a>Link</a>

ฉันต้องไปที่:

<a href="somelink url">Link</a>

javascript html

— พาเวล
แหล่งที่มา

166

var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"

— stecb
แหล่งที่มา

น่าสนใจ. ฉันไม่รู้ว่าคุณสามารถเข้าถึงแอตทริบิวต์เป็นช่องได้โดยตรง (เปรียบเทียบกับโซลูชันของฉันด้านล่างโดยใช้setAttribute) ไม่มีใครรู้ว่าแนวทางนี้เป็นมาตรฐานหรือไม่?

— mgiuca

ฉันคิดว่าในองค์ประกอบ DOM href เป็นแอตทริบิวต์ที่คุณสามารถตั้งค่าได้โดยตรงโดย el.href ใช้ setAttribute (el, attr) แทนเพื่อเพิ่มแอตทริบิวต์ที่กำหนดเองบางอย่างให้กับองค์ประกอบ DOM เฉพาะดังนั้นในกรณีนี้ไม่จำเป็นต้องใช้เพื่อตั้งค่ามาตรฐาน attr

— stecb

แต่ทั้งสองวิธีถูกต้องหรือไม่? ไม่พยายามวิพากษ์วิจารณ์คำตอบ - มันอาจจะถูกต้อง แต่บนเว็บการได้รับสิ่งที่เหมาะกับคุณนั้นไม่เพียงพอ จำเป็นต้องใช้งานได้ในทุกเบราว์เซอร์และนั่นหมายความว่าคุณต้องปฏิบัติตามมาตรฐาน FWIW นี่ใช้ได้กับฉันด้วย (ใน Firefox) แต่ฉันสนใจที่จะรู้ว่ามันเป็นวิธีมาตรฐานหรือไม่ ข้อกำหนด W3C DOM ( w3.org/TR/DOM-Level-2-Core/core.html ) ดูเหมือนจะไม่ได้กล่าวถึง

— mgiuca

6

นี่คืออินเทอร์เฟซสำหรับโต้ตอบกับองค์ประกอบต่างๆได้ง่ายขึ้น ตัวอย่างเช่นลิงก์ทั้งหมดมีวิธีการที่กำหนดไว้HTMLLinkElementซึ่งรองรับการตั้งค่าฟิลด์บางช่องเช่นhref. setAttributeคุณต้องมองในการอ้างอิงเพื่อดูที่หนึ่งที่คุณสามารถใช้โดยไม่ต้อง อีกตัวอย่างหนึ่งคือ<table>องค์ประกอบ ( HTMLTableElement ) ที่คุณสามารถใช้insertRow()เพื่อแทรกแถวใหม่โดยไม่ต้องสร้าง<tr>และผนวกเข้ากับตาราง

— ไทย

3

@mgiuca: โดยทั่วไปสำหรับ HTML DOM คุณควรเลือกใช้คุณสมบัติมากกว่าsetAttribute()และgetAttribute()ซึ่งเสียใน IE และไม่ได้ทำในสิ่งที่คุณคาดหวังเสมอไป ดูstackoverflow.com/questions/4456231/…

— Tim Down

25

ฉันคิดว่าคุณรู้วิธีรับวัตถุ DOM สำหรับ<a>องค์ประกอบ (ใช้document.getElementByIdหรือวิธีอื่น ๆ )

หากต้องการเพิ่มแอตทริบิวต์ใด ๆ เพียงใช้เมธอดsetAttributeบนวัตถุ DOM:

a = document.getElementById(...);
a.setAttribute("href", "somelink url");

— mgiuca
แหล่งที่มา

เพื่อน setattribute ค่อนข้างไม่ได้มาตรฐานสำหรับการแก้ไขแอตทริบิวต์ ในการเข้าถึงหรือแก้ไขค่าปัจจุบันคุณควรใช้คุณสมบัติ ตัวอย่างเช่นใช้ elt.value แทน elt.setAttribute ('value', val) developer.mozilla.org/en/DOM/element.setAttribute#Notes

— naveen

@naveen มันบอกว่า "สะดุดตาที่สุดใน XUL" ซึ่งไม่น่าจะเป็นอะไร ฉันไม่แน่ใจว่ามันอ้างถึงค่าใด ("แอตทริบิวต์บางอย่าง" คลุมเครือมาก) แต่setAttributeเป็นมาตรฐานที่ชัดเจน ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ) และ W3C ไม่ได้กำหนดแอตทริบิวต์ใด ๆ ที่ใช้ไม่ได้ ในทางกลับกันฉันสามารถรับประกันได้ว่าการใช้คุณสมบัติจะล้มเหลวสำหรับชื่อแอตทริบิวต์บางชื่อ เช่นtagNameและsetAttribute- เป็นช่อง / วิธีการของอินเทอร์เฟซ Element อยู่แล้ว ฉันไม่เห็นที่ใดในเอกสาร W3C ที่กล่าวถึงคุณสมบัติของแอตทริบิวต์

— mgiuca

@mgiuca: ดูเหมือนว่าคุณจะพบข้อมูลจำเพาะที่เกี่ยวข้องหลังจากโพสต์ความคิดเห็นล่าสุดนั้น tagNameฉันไม่เข้าใจจุดของคุณเกี่ยวกับคุณสมบัติของความล้มเหลวและจากนั้นการกล่าวขวัญ คุณกำลังพูดถึงคุณลักษณะที่กำหนดเองหรือไม่?

— Tim Down

ฉันหมายความว่า DOM (แม้ว่าจะใช้งานในเบราว์เซอร์) เป็นข้อมูลจำเพาะทั่วไปสำหรับการทำงานกับแผนผัง XML โดยทั่วไปไม่ใช่แค่ HTML เมื่อทำงานร่วมกับองค์ประกอบ XML พลวิธีเดียวที่จะได้รับความน่าเชื่อถือและการตั้งค่าแอตทริบิวต์เป็นgetAttributeและsetAttribute; "tagName"เป็นตัวอย่างของแอตทริบิวต์ที่ไม่สามารถใช้เป็นคุณสมบัติได้ เฉพาะเมื่อทำงานกับ HTML และสำหรับแอตทริบิวต์บางอย่างที่กำหนดในข้อมูลจำเพาะ DOM HTML คุณสามารถใช้คุณสมบัติเพื่ออ่านและกำหนดแอตทริบิวต์

— mgiuca

ฉันอาจจะเข้าใจผิด แต่ก็ยังสับสน tagName เป็นคุณสมบัติของอElementอบเจ็กต์ใน JavaScript ทั้ง HTML และ XML DOMs และคุณไม่สามารถรับชื่อแท็กขององค์ประกอบผ่านทางgetAttribute("tagName")(ยกเว้นใน IE ซึ่งมีการใช้งานgetAttribute()และsetAttribute()เสีย) ซึ่งดูเหมือนจะตรงข้ามกับที่คุณพูด

— Tim Down

3

ครั้งแรกลองเปลี่ยนไป<a>Link</a><span id=test><a>Link</a></span>

จากนั้นเพิ่มสิ่งนี้ในฟังก์ชัน javascript ที่คุณกำลังเรียกใช้:

var abc = 'somelink';
document.getElementById('test').innerHTML = '<a href="' + abc + '">Link</a>';

วิธีนี้ลิงก์จะมีลักษณะดังนี้:

<a href="somelink">Link</a>

— ราหุลสุธา
แหล่งที่มา

สวัสดี. ยินดีต้อนรับสู่ Stackoverflow คำถาม OP น่าจะเป็นเกี่ยวกับวิธีการที่จะเพิ่มhrefไปยังมีอยู่ aแท็ก ( I พื้นต้องการเพิ่มแอตทริบิวต์ href ให้ <a> </a> แบบไดนามิก ) แต่คำตอบนี้ดูเหมือนว่าจะอธิบายวิธีการสร้างแท็กที่มีa href

— Moishe Lipsker

1

document.getElementById('link-id').href = "new-href";

ฉันรู้ว่านี่เป็นโพสต์เก่า แต่นี่คือซับเดียวที่อาจเหมาะกับคนบางคนมากกว่า

— noɥʇʎԀʎzɐɹƆ
แหล่งที่มา