使用JavaScript在HTML中动态创建锚标记

Question

我有关于锚标签和javascript的问题.将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;  
}

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>

Answer 2

您可以通过动态添加锚标记来做到这一点

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

请查看这里以获取更多参考

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