Làm cách nào để tạo liên kết bằng javascript?

127

Tôi có một chuỗi cho một tiêu đề và một chuỗi cho một liên kết. Tôi không chắc chắn làm thế nào để kết hợp hai thứ lại với nhau để tạo liên kết trên một trang bằng Javascript. Bất kỳ trợ giúp được đánh giá cao.

EDIT1: Thêm chi tiết hơn cho câu hỏi. Lý do tôi cố gắng tìm hiểu điều này là vì tôi có nguồn cấp dữ liệu RSS và có một danh sách các tiêu đề và URL. Tôi muốn liên kết các tiêu đề với URL để làm cho trang hữu ích.

EDIT2: Tôi đang sử dụng jQuery nhưng hoàn toàn mới với nó và không biết nó có thể giúp gì trong tình huống này.

— Xavier
nguồn

Bạn có đang tải nguồn cấp RSS bằng jQuery hoặc một cái gì đó (Mootools, Dojo, Atlas, v.v ...) không? Nếu bạn đang cố gắng tự động tạo các thẻ neo dựa trên danh sách RSS của bên thứ ba có được khi tải trang, tôi sẽ đề xuất sử dụng thư viện jQuery hoặc khác để thêm phần tử. Các chi tiết trong trường hợp này rất quan trọng để biết những gì cần phải được thực hiện. Tuy nhiên, các phương thức DOM là một minh họa hữu ích.

— Jared Farrish

Hãy thử liên kết này Tôi nghĩ rằng nó có thể có lợi

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

— Jared Farrish
nguồn

1

Đây là một ví dụ rất chung về việc sử dụng các phương thức DOM để thêm thẻ neo vào một trang. Chẳng hạn, phương thức appendChild có thể là một thành phần danh sách, TD hoặc thành phần khác trong trang. Xem: quirksmode.org

— Jared Farrish

5

@Nadu - Hãy ngừng chỉnh sửa câu trả lời của tôi. Nếu bạn muốn một điều cụ thể được nói, hãy thêm một điều của riêng bạn; nếu nó không "khác biệt" đủ để đảm bảo nó, thì nó không đủ khác nhau để đảm bảo chỉnh sửa.

— Jared Farrish

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview Tôi đã được tạo một ví dụ về plunker.

— Harold Castillo

61

Với 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>';

hoặc, theo đề xuất củ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>

Với 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);

Trong tất cả các ví dụ trên, bạn có thể nối neo vào bất kỳ phần tử nào, không chỉ với 'phần thân' và desiredLinklà một biến chứa địa chỉ mà phần tử neo của bạn trỏ đến và desiredTextlà một biến chứa văn bản sẽ được hiển thị trong yếu tố neo.

— gion_13
nguồn

3

Tôi nghĩ rằng người duy nhất bạn bỏ đi là:document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— travis

1

Để tránh XSS, bạn nên tránh nối chuỗi ( +) và .innerHTMLkhi xây dựng HTML. Với jQuery .attr("href", desiredLink)và .text(desiredText)là những gì bạn muốn ở đây.

— Wes Turner

15

Tạo liên kết bằng JavaScript:

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

HOẶC LÀ

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

HOẶC LÀ

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

— Gian giữa
nguồn

12

Có một vài cách khác nhau:

Nếu bạn muốn sử dụng Javascript thô (không có người trợ giúp như JQuery), thì bạn có thể làm một cái gì đó như:

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

Phương pháp khác là viết liên kết trực tiếp vào tài liệu:

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

— Roopinder
nguồn

Tôi chắc chắn thích tùy chọn đầu tiên tốt hơn. +1 cho điều đó, nhưng trộn lẫn JS và HTML trộn lẫn nội dung và hành vi, nên tách biệt. Quá liều, điều đó có thể dẫn đến một cơn ác mộng bảo trì.

— jmort253

Tôi cũng có xu hướng thích tùy chọn đầu tiên, nhưng có lẽ sử dụng JQuery để đạt được hiệu quả tương tự (để dễ đọc và dễ bảo trì).

— Roopinder

1

Có lẽ bạn nên tránh sử dụng document.write stackoverflow.com/questions/4520440/ cấp

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

Mở rộng đoạn trích

'Đối tượng neo' có các thuộc tính * (được kế thừa) * riêng để đặt liên kết, văn bản của nó. Vì vậy, chỉ cần sử dụng chúng. .setAttribution nói chung hơn nhưng thông thường bạn không cần nó. a.title ="Blah"sẽ làm như vậy và rõ ràng hơn! Vâng, một tình huống sẽ yêu cầu .setAttribution là đây:var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
Để giao thức mở. Thay vì http: //example.com/path hãy xem xét chỉ sử dụng //example.com/path. Kiểm tra xem example.com có thể được truy cập bằng http: cũng như https: nhưng 95% trang web sẽ hoạt động trên cả hai.
Offtopic: Đó không phải là thực sự có liên quan về việc tạo ra các liên kết trong JS nhưng có lẽ tốt biết: Vâng đôi khi giống như trong Chromes dev-an ủi bạn có thể sử dụng$("body")thay vìdocument.querySelector("body")A_$ = document.querySelectorsẽ 'danh dự' nỗ lực của bạn với một sự thỉnh nguyện trái phép lỗi lần đầu tiên bạn sử dụng nó. Đó là bởi vì bài tập chỉ 'lấy' .querySelector (một tham chiếu cho phương thức lớp ). Với.bind(...bạn cũng sẽ liên quan đến bối cảnh (ở đâydocument) và bạn có được mộtphương thức đối tượng sẽ hoạt động như bạn mong đợi.

— Nadu
nguồn

3

Tự động tạo một siêu liên kết với JavaScript thô:

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

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

— jmort253
nguồn

Sử dụng `anchorElem.text = yourLinkText; `thay vì InternalHTML sẽ rõ ràng hơn. Và có, hãy xem xét những gì sẽ xảy ra nếu LinkLink của bạn có thể "<- thật tuyệt!"

— Nadu

-4

Bạn dán cái này vào bên trong:

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

— zerodunwash
nguồn

OP rõ ràng đang yêu cầu tạo liên kết với JavaScript (không phải HTML)!

— ghét