मैं जावास्क्रिप्ट का उपयोग करके गतिशील रूप से लिंक में "href" विशेषता कैसे जोड़ सकता हूं?

Question

मैं hrefजावास्क्रिप्ट का उपयोग करके गतिशील रूप से लिंक में विशेषता कैसे जोड़ सकता हूं ?

मैं मूल रूप से एक hrefविशेषता को <a></a>गतिशील रूप से जोड़ना चाहता हूं (जब उपयोगकर्ता वेबसाइट में विशिष्ट छवि पर क्लिक करता है)।

तो इससे:

<a>Link</a>

मुझे जाना है:

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

Answer 1

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

Comments

दिलचस्प। मुझे नहीं पता था कि आप सीधे फ़ील्ड के रूप में विशेषताओं का उपयोग कर सकते हैं (नीचे मेरे समाधान की तुलना करें, उपयोग करके setAttribute)। क्या किसी को पता है कि क्या यह दृष्टिकोण मानक है?

— मागुका

मुझे लगता है कि DOM तत्व href पर एक विशेषता है जिसे आप सीधे el.href द्वारा सेट कर सकते हैं। इसके बजाय, setAttribute (el, attr) का उपयोग किसी विशेष DOM तत्व में कुछ कस्टम विशेषताएँ जोड़ने के लिए किया जाता है, इसलिए इस स्थिति में इसे एक std सेट करने के लिए उपयोग करने की कोई आवश्यकता नहीं है। attr

— stecb

लेकिन क्या दोनों तरीके सही हैं ? उत्तर की आलोचना करने की कोशिश नहीं करना - यह अच्छी तरह से सही हो सकता है। लेकिन वेब पर, आपके लिए कुछ ऐसा काम करना पर्याप्त नहीं है। इसे सभी ब्राउज़रों में काम करने की आवश्यकता है, और इसका मतलब है कि आपको मानकों का पालन करने की आवश्यकता है। एफडब्ल्यूआईडब्ल्यू, यह मेरे लिए भी (फ़ायरफ़ॉक्स में) काम करता है, लेकिन मुझे यह जानने में दिलचस्पी है कि क्या यह वास्तव में एक मानक तरीका है। W3C DOM विनिर्देशन ( w3.org/TR/DOM-Level-2-Core/core.html ) इसका उल्लेख नहीं करता है।

— मागुका

ये तत्वों के साथ अधिक आसानी से बातचीत करने के लिए इंटरफेस हैं। उदाहरण के लिए, सभी लिंक में परिभाषित तरीके हैं, HTMLLinkElementजो कुछ क्षेत्रों को सेट करने का समर्थन करता है जैसे कि href। आपको यह देखने के लिए संदर्भ में देखना होगा कि आप किसका उपयोग कर सकते हैं setAttribute। एक अन्य उदाहरण <table>तत्व ( HTMLTableElement ) है जहां आप insertRow()नई पंक्तियों को सम्मिलित करने के लिए उपयोग कर सकते हैं बिना <tr>इसे बनाए और इसे तालिका में जोड़ें।

— थाई

@mgiuca: HTML DOMS के लिए सामान्य तौर पर, आप के बजाय गुणों का उपयोग करके को प्राथमिकता देनी चाहिए setAttribute()और getAttribute(), IE में टूट रहे हैं और हमेशा आप क्या उम्मीद कर सकते हैं ऐसा नहीं करते हैं। देखें stackoverflow.com/questions/4456231/…

— टिम डाउन

Answer 2

मुझे लगता है कि आप जानते हैं कि <a>तत्व के लिए डोम ऑब्जेक्ट कैसे प्राप्त करें (उपयोग document.getElementByIdया किसी अन्य विधि)।

किसी भी विशेषता को जोड़ने के लिए, DOM ऑब्जेक्ट पर सेटअट्रीब्यूट विधि का उपयोग करें :

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

Comments

पाल, सेटटैबर्स विशेषताओं को संशोधित करने के लिए बहुत ही गैर-मानक है। वर्तमान मानों को एक्सेस या संशोधित करने के लिए, आपको गुणों का उपयोग करना चाहिए। उदाहरण के लिए, elt.valAttribute ('value', val) के बजाय elt.value का उपयोग करें। developer.mozilla.org/en/DOM/element.setAttribute#Notes

— नवीन

@ नवीन यह कहते हैं कि "एक्सयूएल में सबसे विशेष रूप से", जो संभवतः ऐसा नहीं है। मुझे यकीन नहीं है कि यह किन अन्य मूल्यों को संदर्भित करता है ("कुछ विशेषताएं" बहुत अस्पष्ट है), लेकिन setAttributeस्पष्ट रूप से मानक ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ) है, और W3C किसी भी विशेषता को परिभाषित नहीं करता है जो इसके लिए काम नहीं करता है। इसके विपरीत, मैं गारंटी दे सकता हूं कि संपत्ति का उपयोग कुछ विशेष नामों के लिए विफल हो जाएगा। जैसे tagName, और setAttribute- वे पहले से ही तत्व इंटरफ़ेस के क्षेत्र / तरीके हैं। मुझे W3C दस्तावेज़ में कहीं भी नहीं दिखता है जो विशेषताओं के लिए गुणों का उल्लेख करता है।

— मागुका

@ मिगुका: ऐसा लगता है कि आपको अंतिम टिप्पणी पोस्ट करने के बाद प्रासंगिक कल्पना मिल गई है। मैं आपकी बातों को विफल करने और फिर उल्लेख करने के गुणों के बारे में नहीं समझता tagName। क्या आप कस्टम विशेषताओं के बारे में बात कर रहे हैं?

— टिम डाउन

मेरा मतलब है कि डोम (यहां तक ​​कि ब्राउज़र में भी लागू किया गया) सामान्य रूप से XML पेड़ों के साथ काम करने के लिए एक सामान्य कल्पना है, न कि केवल HTML। जब मनमाने ढंग से XML तत्वों के साथ काम करते हैं, तो गुण को प्राप्त करने और सेट करने का एकमात्र तरीका है getAttributeऔर setAttribute; "tagName"एक विशेषता का एक उदाहरण है जो एक संपत्ति के रूप में काम नहीं कर सकता है। केवल HTML के साथ काम करते समय, और DOM HTML युक्ति में परिभाषित कुछ विशेषताओं के लिए, आप गुणों को पढ़ने और असाइन करने के लिए गुणों का उपयोग कर सकते हैं।

— मागुका

मुझे शायद गलतफहमी हो रही है, लेकिन यह अभी भी भ्रमित है। tagName है की संपत्ति Elementजावास्क्रिप्ट में वस्तुओं, दोनों HTML और XML DOMS में, और तुम नहीं के माध्यम से एक तत्व के टैग नाम प्राप्त कर सकते हैं getAttribute("tagName")(आईई, की जिसका कार्यान्वयन में छोड़कर getAttribute()और setAttribute()है, जो ठीक आप क्या कह रहे हैं के विपरीत लगता है टूट गया है)।

— टिम डाउन

Answer 3

सबसे पहले, बदलने की कोशिश <a>Link</a>करें <span id=test><a>Link</a></span>।

फिर, जावास्क्रिप्ट फ़ंक्शन में कुछ इस तरह जोड़ें कि आप कॉल कर रहे हैं:

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

इस तरह से लिंक इस तरह दिखेगा:

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

Comments

नमस्ते। Stackoverflow में आपका स्वागत है। ओपी के सवाल यह है कि एक जोड़ने के लिए के बारे में हो रहा है hrefएक के लिए मौजूदा a टैग ( मैं मूल रूप से गतिशील </a> <a> को एक href विशेषता जोड़ना चाहते हैं )। हालाँकि, यह उत्तर समझा रहा है कि कैसे एक के साथ टैग बनाने के लिए । ahref

— Moishe Lipsker

Answer 4

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

---

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन यहां एक-लाइनर है जो कुछ लोगों के लिए अधिक उपयुक्त हो सकता है।