ฉันจะสร้างลิงค์โดยใช้จาวาสคริปต์ได้อย่างไร?

128

ฉันมีสตริงสำหรับหัวเรื่องและสตริงสำหรับลิงก์ ฉันไม่แน่ใจว่าจะรวมทั้งสองเข้าด้วยกันเพื่อสร้างลิงก์บนหน้าเว็บโดยใช้ Javascript ได้อย่างไร ขอความช่วยเหลือใด ๆ

EDIT1: การเพิ่มรายละเอียดให้กับคำถาม เหตุผลที่ฉันพยายามหาสิ่งนี้เป็นเพราะฉันมีฟีด RSS และมีรายการชื่อและ URL ฉันต้องการเชื่อมโยงชื่อกับ URL เพื่อทำให้หน้านี้มีประโยชน์

แก้ไข 2: ฉันใช้ jQuery แต่ยังใหม่กับมันมากและไม่รู้ว่ามันจะช่วยได้ในสถานการณ์นี้

— ซาเวียร์
แหล่งที่มา

คุณกำลังโหลด RSS feed ด้วย jQuery หรืออะไรบางอย่าง (Mootools, Dojo, Atlas ฯลฯ ... ) หากคุณกำลังพยายามสร้างแท็กจุดยึดแบบไดนามิกตามรายการ RSS ของบุคคลที่สามที่ได้รับจากการโหลดหน้าเว็บฉันขอแนะนำให้ใช้ไลบรารี jQuery หรืออื่น ๆ เพื่อเพิ่มองค์ประกอบ รายละเอียดในกรณีนี้เป็นสิ่งสำคัญที่ต้องรู้ว่าต้องทำอะไร อย่างไรก็ตามวิธีการ DOM เป็นภาพประกอบที่มีประโยชน์

— Jared Farrish

ลองใช้ลิงก์นี้ฉันคิดว่ามันจะเป็นประโยชน์

— Yitzhak Weinberg

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 เพื่อเพิ่มแท็กจุดยึดในเพจ ตัวอย่างเช่นเมธอด appendChild อาจเป็นองค์ประกอบรายการ TD หรือองค์ประกอบอื่น ๆ ภายในเพจ ดู: quirksmode.org

— Jared Farrish

5

@ นาฑู - โปรดหยุดแก้ไขคำตอบของฉัน หากคุณต้องการให้มีการพูดถึงเรื่องใดเรื่องหนึ่งให้เพิ่มของคุณเอง หากไม่ "แตกต่าง" มากพอที่จะรับประกันได้ก็จะไม่แตกต่างกันมากพอที่จะรับประกันการแก้ไข

— Jared Farrish

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=previewฉันได้สร้างตัวอย่างของ plunker แล้ว

— Harold Castillo

62

ด้วย JavaScript

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

— travis

1

เพื่อหลีกเลี่ยง XSS คุณควรหลีกเลี่ยงการต่อสายอักขระ ( +) และ.innerHTMLเมื่อสร้าง HTML ด้วย jQuery .attr("href", desiredLink)และ.text(desiredText)เป็นสิ่งที่คุณต้องการที่นี่

— Wes Turner

15

สร้างลิงค์โดยใช้ JavaScript:

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

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

12

มีสองวิธี:

หากคุณต้องการใช้ Javascript แบบดิบ (โดยไม่มีตัวช่วยเช่น 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 เพื่อให้ได้ผลเช่นเดียวกัน (เพื่อให้อ่านง่ายและบำรุงรักษาง่าย)

— Roopinder

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>

ขยายข้อมูลโค้ด

'Anchor Object' มีคุณสมบัติ * (สืบทอด) * ของตัวเองสำหรับการตั้งค่าลิงค์ข้อความของมัน ดังนั้นเพียงแค่ใช้พวกเขา .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:ไม่เกี่ยวข้องกับการสร้างลิงก์ใน JS แต่อาจเป็นเรื่องดีที่ควรทราบ: บางครั้งเช่นในคอนโซลผู้พัฒนาโครเมียมที่คุณสามารถใช้$("body")แทนdocument.querySelector("body")A_$ = document.querySelectorจะ 'ให้เกียรติ' ความพยายามของคุณด้วยข้อผิดพลาดในการเรียกใช้ที่ผิดกฎหมายในครั้งแรกที่คุณใช้ นั่นเป็นเพราะการมอบหมายเพียงแค่ 'คว้า' .querySelector (การอ้างอิงถึง วิธีการคลาส ) ด้วย.bind(...คุณยังจะเกี่ยวข้องกับบริบท (ที่นี่มันdocument) และคุณได้รับวัตถุวิธีการที่จะทำงานตามที่คุณอาจคาดหวังว่ามัน

— รัฐทมิฬนาฑู
แหล่งที่มา

3

สร้างไฮเปอร์ลิงก์แบบไดนามิกด้วย JavaScript ดิบ:

   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; `แทนที่จะเป็น innerHTML ซึ่งจะชัดเจนมากขึ้น และใช่พิจารณาว่าจะเกิดอะไรขึ้นถ้า yourLinkText อาจเป็น "<- เจ๋งมาก!"

— Nadu

-5

คุณวางสิ่งนี้ไว้ข้างใน:

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

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

OP ขอให้สร้างลิงค์ด้วย JavaScript อย่างชัดเจน (ไม่ใช่ HTML)!

— hatef