আমি জাভাস্ক্রিপ্ট ব্যবহার করে কীভাবে একটি লিঙ্ক তৈরি করব?

128

আমার কাছে একটি শিরোনামের জন্য একটি স্ট্রিং এবং একটি লিঙ্কের একটি স্ট্রিং রয়েছে। জাভাস্ক্রিপ্ট ব্যবহার করে কোনও পৃষ্ঠায় একটি লিঙ্ক তৈরি করতে কীভাবে দুজনকে একসাথে রাখা যায় তা আমি নিশ্চিত নই। কোন সাহায্য প্রশংসা করা হয়।

EDIT1: প্রশ্নের আরও বিশদ যুক্ত করা হচ্ছে। আমি এটি বের করার চেষ্টা করার কারণটি হ'ল আমার কাছে আরএসএস ফিড রয়েছে এবং শিরোনাম এবং URL গুলি ইউআরএলগুলির একটি তালিকা রয়েছে। পৃষ্ঠাটি দরকারী করার জন্য আমি শিরোনামগুলি URL টিতে লিঙ্ক করতে চাই।

সম্পাদনা 2: আমি jQuery ব্যবহার করছি তবে এটি সম্পূর্ণ নতুন এবং আমি জানি না যে এটি এই পরিস্থিতিতে সহায়তা করতে পারে।

— জেভিয়ার
সূত্র

আপনি কি jQuery বা কোনও কিছু (মটুলস, দোজো, এ্যাটলাস, ইত্যাদি ...) দিয়ে আরএসএস ফিডটি লোড করছেন? আপনি যদি পৃষ্ঠা লোডে অর্জিত তৃতীয় পক্ষের আরএসএস তালিকার উপর ভিত্তি করে গতিশীলভাবে অ্যাঙ্কর ট্যাগগুলি তৈরি করার চেষ্টা করছেন তবে আমি উপাদানটি যুক্ত করতে jQuery লাইব্রেরি বা অন্যটি ব্যবহার করার পরামর্শ দেব। এই ক্ষেত্রে বিশদটি কী করা দরকার তা জানা গুরুত্বপূর্ণ। তবে, ডিওএম পদ্ধতিগুলি একটি দরকারী চিত্রণ।

— জ্যারেড ফারিশ

এই লিঙ্কটি চেষ্টা করে দেখুন আমি মনে করি এটি উপকারী হতে পারে

— ইয়িটজাক ওয়েইনবার্গ

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

এটি কোনও পৃষ্ঠায় অ্যাঙ্কর ট্যাগ যুক্ত করার জন্য ডিওএম পদ্ধতিগুলি ব্যবহার করার খুব সাধারণ উদাহরণ। উদাহরণস্বরূপ, অ্যাপেনডাইল্ড পদ্ধতিটি পৃষ্ঠার মধ্যে একটি তালিকা উপাদান, টিডি বা অন্য উপাদান হতে পারে। দেখুন: quirksmode.org

— জারেড ফারিশ

5

@ নাড়ু - দয়া করে আমার উত্তর সম্পাদনা বন্ধ করুন। আপনি যদি একটি নির্দিষ্ট জিনিস বলা যেতে চান তবে নিজের একটি যুক্ত করুন; যদি এটির ওয়ারেন্ট দেওয়ার পক্ষে এটি "আলাদা" না হয়, তবে সম্পাদনার ওয়ারেন্ট দেওয়ার পক্ষে এটি আলাদা নয়।

— জেরেদ ফারিশ

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p= পূর্বরূপ আমি একটি চূড়ান্ত উদাহরণ তৈরি করা হয়েছে।

— হ্যারল্ড কাস্টিলো

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

বা, @ ট্র্যাভিসের পরামর্শ অনুসারে :

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

এক্সএসএস এড়ানোর জন্য, আপনার স্ট্রিং কনক্যাটেনশন ( +) এবং .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, তবে জেএস এবং এইচটিএমএল মিশ্রকরণ সামগ্রী এবং আচরণের মিশ্রণ করে, যা পৃথক হওয়া উচিত। ওভারডোন, এটি রক্ষণাবেক্ষণের দুঃস্বপ্নের দিকে নিয়ে যেতে পারে।

— 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"একই কাজ করবে এবং আরও স্পষ্ট! ভাল একটি পরিস্থিতি যা দাবি করবে। সেট অ্যাট্রিবিউট হ'ল:var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
প্রোটোকল খোলা ছেড়ে দিন। Http: //example.com/path এর পরিবর্তে কেবল //example.com/path ব্যবহার করতে বিবেচনা করুন। উদাহরণ.কম HTTP- র পাশাপাশি https- র মাধ্যমে অ্যাক্সেস করা যায় কিনা তা পরীক্ষা করুন : তবে 95% সাইট উভয় ক্ষেত্রেই কাজ করবে।
OffTopic: যে জানতে জাতীয় লিঙ্কগুলি কিন্তু হয়তো ভাল তৈরি সম্পর্কে সত্যিই প্রাসঙ্গিক না: ওয়েল কখনও কখনও মধ্যে chromes dev-সান্ত্বনা মত আপনি ব্যবহার করতে পারেন$("body")পরিবর্তেdocument.querySelector("body")একটি_$ = document.querySelector'সম্মান' একটি সঙ্গে আপনার প্রচেষ্টা হবে অবৈধ আবাহন ত্রুটি প্রথমবার আপনি এটি ব্যবহার। কারণ অ্যাসাইনমেন্টটি কেবল 'গ্র্যাব' করে তোলে qu ক্যুরিয়ার নির্বাচনকারী ( শ্রেণি পদ্ধতিরএকটি রেফ)। এর সাথে.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 ব্যবহার করুন; inner অভ্যন্তর HTML এর পরিবর্তে আরও স্পষ্ট হবে। এবং হ্যাঁ বিবেচনা করুন যদি আপনার লিঙ্কটেক্সটটি "<- এটি দুর্দান্ত!"

— নাদু

-4

আপনি এটি ভিতরে পেস্ট করুন:

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

— zerodunwash
সূত্র

ওপি স্পষ্টভাবে জাভাস্ক্রিপ্ট (এইচটিএমএল নয়) এর সাথে একটি লিঙ্ক তৈরি করতে বলছে!

— 25:36