2017-02-18 90 views
5

我有一個關於錨點標記和javascript的問題。 Converting a URL to an anchor tag使用JavaScript在HTML中動態創建錨點標記

文本框接受URL

我做了一個JavaScript函數,增加了(如 「www.youtube.com」)的 「http://」 的鏈接。

我該如何做到這一點,以便轉換按鈕在網頁上添加一個鏈接,將您帶到另一個選項卡中的網站。

我的JavaScript代碼如下:

var webpage=""; 
var url=""; 
var message=""; 
var x= 0; 
var page=""; 

function convert() 
{  
    url=document.getElementById("link").value; 
    webpage = "http://" + url; 
} 

回答

0

function addLink() 
 
{  
 
    var url = document.getElementById("link").value; 
 
    var webpage = "http://" + url; 
 
    
 
    var a = document.createElement("a");     // create an anchor element 
 
    a.href = webpage;         // set its href 
 
    a.textContent = url;         // set its text 
 
    
 
    document.getElementById("container").appendChild(a); // append it to where you want 
 
}
a { 
 
    display: block; 
 
}
<div id="container"></div> 
 
<br><br> 
 
<input id="link"/><button onclick='addLink()'>ADD</button>

2

您可以生成元素並將neede屬性應用於它。然後將新鏈接附加到輸出段落。

function generate() { 
 
    var a = document.createElement('a'); 
 
    
 
    a.href = 'http://' + document.getElementById('href').value;  
 
    a.target = '_blank'; 
 
    a.appendChild(document.createTextNode(document.getElementById('href').value)); 
 
    document.getElementById('link').appendChild(a); 
 
    document.getElementById('link').appendChild(document.createElement('br')); 
 
}
Link: <input id="href"> <button onclick="generate()">Generate</button> 
 
<p id="link"></p>

+0

到目前爲止,這是包括'''target'''屬性,它解決了有關在另一個選項卡中打開了OP的問題,漂亮的唯一的答案! – j3py

0

我假設你知道如何編寫JavaScript,所以我不會去那裏。問題是瞭解<a>標籤的target屬性。

W3Schools: Target Attribute