使用JavaScript动态创建HTML中的锚点标签

Question

我有一个关于锚标签和Javascript的问题。将URL转换为锚标签

文本框接受URL（例如，“www.youtube.com”）。

我编写了一个Javascript函数，将“http://”添加到链接中。

如何使转换按钮在另一个选项卡上添加链接，以便打开该网站。

我的Javascript代码如下：

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

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

- Kyle Goertzen

Answer 1

你可以生成元素并应用所需的属性。然后将新链接添加到输出段落中。

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>

- Nina Scholz

---

到目前为止，这是唯一一个包括target属性的答案，它解决了关于在另一个标签页中打开的问题，非常好！ - j3py

Answer 2

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>

- ibrahim mahrir

Answer 3

我假设你知道如何编写JavaScript，所以我不会在这里详细介绍。问题在于理解标签的target属性。

W3Schools：目标属性

- Anthony Rutledge

Answer 4

您可以通过动态添加锚点标签来实现这一点。

var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href',webpage);
aTag.innerHTML = "link text";
mydiv.appendChild(aTag);

请查看此处以获取更多参考资料：

如何在Javascript中动态添加锚标签到div？

- RupamDotInfo