javascript DOM-添加 href 和 <a> 链接答案

【问题标题】：javascript DOM-add href and <a> linkjavascript DOM-添加 href 和 <a> 链接
【发布时间】：2016-09-25 03:40:46
【问题描述】：

我做了一个包含 id 名称和链接的表格。当您单击它时，我想将链接带到分配给它的页面。我尝试了不同的方法，但它不起作用。

所以我希望我的链接在你点击它时进入页面

这是我到目前为止所得到的

var companies = [
    {
        id: 1,
        name: 'Google',
        link: 'http://google.com/'
    },
    {
        id: 2,
        name: 'Microsoft',
        link: 'http://microsoft.com/'
    },
    {
        id: 3,
        name: 'Apple',
        link: 'http://apple.com'
    }
];



var tbl = document.createElement("table");
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");

var tr_head = document.createElement("tr");

var th_id = document.createElement("th");
var th_name = document.createElement("th");
var th_link = document.createElement("th");

th_id.textContent = "Id";
th_name.textContent = "Name";
th_link.textContent = "link";

tr_head.appendChild(th_id);
tr_head.appendChild(th_name);
tr_head.appendChild(th_link);

thead.appendChild(tr_head);

for(var i = 0;  i < companies.length; i++) {
    var tr_body = document.createElement("tr");

    var td_id = document.createElement("td");
    var td_name = document.createElement("td");
    var td_link = document.createElement("td");

    var id = companies[i].id;
    var name = companies[i].name;
    var link = companies[i].link;

        //link-------------------

        var a = document.createElement('a');
        a.setAttribute("href", link);
        td_link.appendChild(a);


    td_id.textContent = id;
    td_name.textContent = name;
    td_link.textContent = link;

    tr_body.appendChild(td_id);
    tr_body.appendChild(td_name);
    tr_body.appendChild(td_link);


    tbody.appendChild(tr_body);

    //css----------------------
    td_id.style.padding = "10px";
    td_id.style.border = "1px solid black";

    td_name.style.padding = "10px";
    td_name.style.border = "1px solid black";

    td_link.style.padding = "10px";
    td_link.style.border = "1px solid black";

}

//css -----------
tbl.style.border = "1px solid black";

th_id.style.padding = "10px";
th_id.style.border = "1px solid black";

th_name.style.padding = "10px";
th_name.style.border = "1px solid black";

th_link.style.padding = "10px";
th_link.style.border = "1px solid black";

tbl.appendChild(thead);
tbl.appendChild(tbody);

console.log(tbl);

document.body.appendChild(tbl);

【问题讨论】：

标签： javascript url dom hyperlink href

【解决方案1】：

我同意 Parag Datar，但此处给出的答案 https://stackoverflow.com/a/4772817/3204135 将涵盖缺失的链接文本。在您的代码中，它可能看起来像这样：

    var a = document.createElement('a');
    a.setAttribute("href", link);
    var linkText = document.createTextNode(link);
    a.appendChild(linkText);
    td_link.appendChild(a);

【讨论】：

【解决方案2】：

删除td_link.textContent = link; 行，你就很好了！

【讨论】：