मैं जावास्क्रिप्ट का उपयोग करके एक लिंक कैसे बनाऊं?

128

मेरे पास शीर्षक के लिए एक स्ट्रिंग और लिंक के लिए एक स्ट्रिंग है। मुझे यकीन नहीं है कि जावास्क्रिप्ट का उपयोग करके पृष्ठ पर एक लिंक बनाने के लिए दोनों को एक साथ कैसे रखा जाए। किसी भी मदद की सराहना की है।

EDIT1: प्रश्न के लिए और अधिक विवरण जोड़ना। इसका कारण मैं यह जानने की कोशिश कर रहा हूं कि मेरे पास RSS फ़ीड है और शीर्षकों और URL की सूची है। मैं पृष्ठ को उपयोगी बनाने के लिए शीर्षक को URL से जोड़ना चाहूंगा।

EDIT2: मैं jQuery का उपयोग कर रहा हूँ, लेकिन यह पूरी तरह से नया है और यह नहीं जानता कि यह इस स्थिति में मदद कर सकता है।

— जेवियर
स्रोत

क्या आप jQuery या कुछ (Mootools, Dojo, Atlas, आदि ...) के साथ RSS फ़ीड लोड कर रहे हैं? यदि आप पृष्ठ लोड पर हासिल की गई तृतीय-पक्ष RSS सूची के आधार पर एंकर टैग को गतिशील रूप से बनाने की कोशिश कर रहे हैं, तो मैं तत्व जोड़ने के लिए jQuery लाइब्रेरी या अन्य का उपयोग करने का सुझाव दूंगा। इस मामले में विवरण यह जानना महत्वपूर्ण है कि क्या किया जाना चाहिए। हालाँकि, DOM विधियाँ एक उपयोगी चित्रण हैं।

— जारेड फरिश

इस लिंक की कोशिश करें मुझे लगता है कि यह फायदेमंद हो सकता है

— यित्ज़ाक वेनबर्ग

227

<html>
  <head></head>
  <body>
    <script>
      var a = document.createElement('a');
      var linkText = document.createTextNode("my title text");
      a.appendChild(linkText);
      a.title = "my title text";
      a.href = "http://example.com";
      document.body.appendChild(a);
    </script>
  </body>
</html>

— जारेड फरिश
स्रोत

1

एक पृष्ठ पर एंकर टैग जोड़ने के लिए DOM तरीकों का उपयोग करने का यह एक बहुत ही सामान्य उदाहरण है। उदाहरण के लिए, परिशिष्ट पद्धति पृष्ठ के भीतर एक सूची तत्व, टीडी या अन्य तत्व हो सकती है। देखें: quirksmode.org

— जारेड फरिश

5

@Nadu - कृपया मेरे उत्तर का संपादन बंद करें। यदि आप चाहते हैं कि कोई विशिष्ट बात कही जाए, तो अपना स्वयं का एक जोड़ें; यदि यह "अलग" करने के लिए पर्याप्त नहीं है, तो इसे संपादित करने के लिए पर्याप्त नहीं है।

— जारेड फरिश

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview मैंने एक प्लंकर उदाहरण बनाया है।

— हेरोल्ड कैस्टिलो

61

जावास्क्रिप्ट के साथ

var a = document.createElement('a');
a.setAttribute('href',desiredLink);
a.innerHTML = desiredText;
// apend the anchor to the body
// of course you can append it almost to any other dom element
document.getElementsByTagName('body')[0].appendChild(a);

document.getElementsByTagName('body')[0].innerHTML += '<a href="'+desiredLink+'">'+desiredText+'</a>';

या, जैसा कि @travis द्वारा सुझाया गया है :

document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

<script type="text/javascript">
//note that this case can be used only inside the "body" element
document.write('<a href="'+desiredLink+'">'+desiredText+'</a>');
</script>

JQuery के साथ

$('<a href="'+desiredLink+'">'+desiredText+'</a>').appendTo($('body'));

$('body').append($('<a href="'+desiredLink+'">'+desiredText+'</a>'));

var a = $('<a />');
a.attr('href',desiredLink);
a.text(desiredText);
$('body').append(a);

उपरोक्त सभी उदाहरणों में आप एंकर को किसी भी तत्व में जोड़ सकते हैं, न कि केवल 'बॉडी' के लिए, और desiredLinkएक ऐसा वेरिएबल है जो आपके एंकर तत्व की ओर इशारा करता है, और desiredTextवह वेरिएबल है जो उस टेक्स्ट को रखता है जो प्रदर्शित किया जाएगा। लंगर तत्व।

— gion_13
स्रोत

3

मुझे लगता है कि केवल एक document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— चीज

1

XSS से बचने के लिए, आपको HTML का निर्माण करते समय ( +) और स्ट्रिंग कंजेशन से बचना चाहिए .innerHTML। JQuery के साथ, .attr("href", desiredLink)और .text(desiredText)आप यहाँ क्या चाहते हैं।

— वेस टर्नर

15

जावास्क्रिप्ट का उपयोग करके लिंक बनाएं:

<script language="javascript">
<!--
document.write("<a href=\"www.example.com\">");
document.write("Your Title");
document.write("</a>");
//-->
</script>

या

<script type="text/javascript">
document.write('Your Title'.link('http://www.example.com'));
</script>

या

<script type="text/javascript">
newlink = document.createElement('a');
newlink.innerHTML = 'Google';
newlink.setAttribute('title', 'Google');
newlink.setAttribute('href', 'http://google.com');
document.body.appendChild(newlink);
</script>

— नवीद
स्रोत

12

कुछ तरीके हैं:

यदि आप कच्चे जावास्क्रिप्ट (JQuery जैसे सहायक के बिना) का उपयोग करना चाहते हैं, तो आप कुछ ऐसा कर सकते हैं:

var link = "http://google.com";
var element = document.createElement("a");
element.setAttribute("href", link);
element.innerHTML = "your text";

// and append it to where you'd like it to go:
document.body.appendChild(element);

दूसरी विधि दस्तावेज़ में सीधे लिंक लिखना है:

document.write("<a href='" + link + "'>" + text + "</a>");

— Roopinder
स्रोत

मैं निश्चित रूप से पहले विकल्प को बेहतर पसंद करता हूं। उसके लिए +1, लेकिन JS और HTML को मिलाने से सामग्री और व्यवहार का मिश्रण होता है, जो अलग होना चाहिए। ओवरडोन, जो एक रखरखाव दुःस्वप्न का कारण बन सकता है।

— jmort253

मैं पहले विकल्प को भी पसंद करता हूं, लेकिन शायद उसी प्रभाव को प्राप्त करने के लिए JQuery का उपयोग कर रहा है (पठनीयता और रखरखाव में आसानी)।

— रूपिंदर

1

आपको संभवतः document.write stackoverflow.com/questions/4520440/…

— TryHarder

4

    <script>
      _$ = document.querySelector  .bind(document) ;

        var AppendLinkHere = _$("body") // <- put in here some CSS selector that'll be more to your needs
        var a   =  document.createElement( 'a' )
        a.text  = "Download example" 
        a.href  = "//bit\.do/DeezerDL"

        AppendLinkHere.appendChild( a )
        

     // a.title = 'Well well ... 
        a.setAttribute( 'title', 
                         'Well well that\'s a link'
                      );
    </script>

स्निपेट का विस्तार करें

'एंकर ऑब्जेक्ट' की अपनी * (विरासत में मिली) * लिंक, अपने पाठ को स्थापित करने के लिए गुण हैं। तो बस उनका उपयोग करें। .setAttribute अधिक सामान्य है, लेकिन आपको आमतौर पर इसकी आवश्यकता नहीं है। a.title ="Blah"वही करेंगे और अधिक स्पष्ट है! अच्छी तरह से मांगने वाली स्थिति .setAttribute यह है:var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
प्रोटोकॉल को खुला छोड़ दें। Http: //example.com/path के बजाय बस //example.com/path का उपयोग करने पर विचार करें। चेक करें कि example.com को http: साथ ही साथ https: तक पहुँचा जा सकता है, लेकिन 95% साइटें दोनों पर काम करेंगी।
Offtopic: यही कारण है कि पता करने के लिए जे एस में लिंक लेकिन शायद अच्छा बनाने के बारे में वास्तव में प्रासंगिक नहीं है: ठीक है कभी कभी में chrome में देव-सांत्वना की तरह उपयोग कर सकते हैं$("body")के बजायdocument.querySelector("body")एक_$ = document.querySelector'सम्मान' एक के साथ अपने प्रयासों होगा अवैध मंगलाचरण त्रुटि पहली बार जब आप इसका इस्तेमाल करते हैं। ऐसा इसलिए है क्योंकि असाइनमेंट सिर्फ 'grabs' .querySelector ( क्लास विधि काएक रेफरी) है। इसके साथ.bind(...आप संदर्भ को भी शामिल करेंगे (यहाँ यह हैdocument) और आपको एक ऑब्जेक्ट विधिमिलती है जोकाम करेगी क्योंकि आप इसकी उम्मीद कर सकते हैं।

— तमिलनाडु
स्रोत

3

कच्चे जावास्क्रिप्ट के साथ डायनामिक रूप से हाइपरलिंक बनाएं:

   var anchorElem = document.createElement('a');
   anchorElem.setAttribute("href", yourLink);
   anchorElem.innerHTML = yourLinkText;

   document.body.appendChild(anchorElem); // append your new link to the body

— jmort253
स्रोत

`AnchorElem.text = yourLinkText का उपयोग करें; `इनर HTML के बजाय जो अधिक स्पष्ट होगा। और हाँ विचार करें कि क्या होगा यदि yourLinkText शायद "<- यह अच्छा है!"

— नाडु

-4

आप इसे अंदर पेस्ट करें:

<A HREF = "index.html">Click here</A>

— zerodunwash
स्रोत

ओपी स्पष्ट रूप से जावास्क्रिप्ट (HTML नहीं) के साथ एक लिंक बनाने के लिए कह रहा है!

— हेटिफ़