Thêm thuộc tính vào thẻ neo bằng JavaScript

HTML cho phép bạn đặt các liên kết bên trong thẻ neo dưới thuộc tính href. Tuy nhiên, trong khi phát triển ứng dụng dựa trên JavaScript, nơi bạn phải xử lý mọi thứ theo chương trình, bạn cần tạo các liên kết động và gán chúng cho thuộc tính href của thẻ neo HTML

Đây là lý do chính tại sao bạn cần JavaScript để tạo liên kết và đây là điều chúng ta sẽ nói đến trong bài viết này, vì vậy hãy cùng tìm hiểu sâu về cách chúng ta có thể dễ dàng tạo liên kết bằng JavaScript

Phương pháp tạo liên kết

Để tạo một liên kết theo chương trình, trước tiên chúng tôi hiểu chính xác những gì chúng tôi cần làm

Đầu tiên, chúng ta cần tạo một thẻ neo bằng javaScript

< a > a >

Tạo thẻ neo Để tạo neo, chúng ta có thể sử dụng mã được cung cấp bên dưới. Tạo một phần tử (thẻ ) và gán nó cho biến có tên là “anchor” vì chúng ta sẽ cần đến nó sau này.
For creating an anchor, we can utilize the code provided below. Create an element( tag) and assign it to the variable named “anchor” as we will need it later:

thả neo = tài liệu. createElement('a');

After creating the anchor tag, we need to write some text inside the tag as demonstrated below:

< a > Trang web Linux <a/>

Viết văn bản vào thẻ Để viết một số văn bản bên trong thẻ , trước tiên hãy tạo một nút văn bản rồi nối nút văn bản đó làm nút con vào neo . Code viết chữ vào thẻ anchor sẽ như thế này.
For writing some text inside the tag, first create a text node and then append that text node as a child to the anchor tag. The code for writing text into the anchor tag will go like this:

//tạo một nút văn bản và gán nó cho biến "liên kết".
để textNode = tài liệu. createTextNode("Trang web Linux");

// Append the textNode as a child to anchor.
neo. appendChild( textNode );

At this stage, the text is appended into the anchor tag. Now, we need to put the link in the href attribute of the anchor tag as shown below.

< a href ="https. //linuxhint. com/"> Trang web Linux < a />

Đặt thuộc tính href của thẻ Để đặt liên kết vào thuộc tính href của thẻ , dòng mã javaScript sau sẽ được sử dụng.
To put the link in the href attribute of tag, the following line of javaScript code will be used:

neo. href = "https. //linuxhint. com/";

After setting the href attribute, the only thing left is to append the tag where we want it to be put.

Nối thẻ vào nội dung HTMLĐể nối thẻ neo vào nội dung, hãy sử dụng dòng mã sau.
To append the anchor tag to the body, use the following line of code.

tài liệu. cơ thể . appendChild( anchor );

Được rồi, bạn đã học hết quy trình tạo liên kết bằng javaScript. Hãy đi qua một ví dụ để chứng minh kết quả

Thí dụ

Hãy lấy một ví dụ đơn giản, nơi chúng ta sẽ chỉ cần tạo một liên kết và nối nó vào phần thân HTML và sẽ kiểm tra hành vi của liên kết xem nó có hoạt động hay không

HTML
Đầu tiên, chúng ta sẽ tạo một nút và khi nhấp vào nút đó, phương thức createLink() sẽ được gọi.

< nhấp vào nút = "createLink()">
    click here
button>

JavaScript
Tất cả mã để tạo liên kết sẽ được viết bên trong hàm createLink() và toàn bộ mã JavaScript sẽ như thế này.

function createLink () {
    let anchor = document.createElement('a');
    let link = document.createTextNode("Trang web Linux");
    anchor.appendChild( liên kết ); .
    anchor.href = "https. //linuxhint. com/";
    tài liệu. cơ thể . appendChild( neo );
}

Khi mọi thứ đã theo thứ tự và sẵn sàng để được thực thi, hãy xác minh điều này và chạy mã

đầu ra

Nhấp vào nút và xem nó có thực sự tạo liên kết cho chúng tôi hay không

Ở màn hình trên, bạn có thể thấy rằng sau khi nhấp vào nút, liên kết đã được tạo thành công và hiển thị trên trang web của chúng tôi. Liên kết này đã từ bỏ với địa chỉ của linuxhint. com có ​​nghĩa là nếu bạn nhấp vào nó, bạn sẽ được chuyển đến linuxhint. com

Hãy nhớ rằng chúng tôi đã thêm liên kết vào mã JavaScript của mình, đó là lý do tại sao nó xuất hiện bên dưới mọi thứ. Vì vậy, bây giờ nếu bạn muốn thêm liên kết vào đầu một phần tử HTML nào đó hoặc ở đầu trang thì chỉ cần thêm thẻ neo thay vì nối nó vào phần nội dung để đạt được mục tiêu này

Thêm thẻ vào trướcThay đổi duy nhất mà chúng tôi cần là sử dụng “tài liệu. cơ thể người. thêm trước” thay vì “tài liệu. cơ thể người. nối thêm” để thêm thẻ liên kết vào đầu trang phía trên mọi phần tử.
The only change that we need is to use “document.body.prepend” instead of “document.body.append” to prepend the anchor tag to the top of the page above every element.

tài liệu. cơ thể . prepend( anchor );

đầu ra

Như bạn có thể thấy ở trên, liên kết đã được thêm vào đầu mỗi phần tử HTML và có thể nhấp được với địa chỉ được đính kèm với nó

Phần kết luận

Có thể dễ dàng tạo liên kết thông qua JavaScript bằng cách trước tiên tạo thẻ bằng phương thức createElement() và sau đó, liên kết có thể được đính kèm vào thuộc tính href của tag. This post has provided the complete function for creating a link totally through JavaScript without touching the HTML.  Moreover, we have discussed how to append or prepend the anchor tag “” vào phần nội dung bằng cách sử dụng các ví dụ chi tiết.

Làm cách nào để thêm thẻ neo bằng JavaScript?