javascript - 如何在js中找到页面中的所有链接并在它们之后添加复选框？

Question

我知道如何找到所有链接，但我不知道如何在标记后以编程方式注入 html。我认为html最终应该是这样的：

<a href="http:www.google.com> this is a useful website</a> <input type="checkbox" name="option" >

Answer 1

您可以在 JQuery 中简单地执行此操作，使用 after：

$("a").after("<input type='checkbox' name='option' />");

编辑

受 RobG 评论的启发——仅适用于特定链接，更改选择器：

// select all a-tags that link to Google
$("a[href='http://www.google.com']")

或者使用某种通配符：

// select all a-tags that contain any href tags (ie, exclude anchor tags)
$("a[href]")

Answer 2

或者您可以使用纯 JavaScript 来完成此操作（尽管 jQuery 肯定会简化您的任务）：

var links = document.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    var chk = document.createElement('input');
    chk.type = 'checkbox';
    chk.value = links[i].textContent || links[i].innerText; // or whatever...
    chk.name = chk.value.replace(/(\s+)/g, ''); // or whatever...
    links[i].parentNode.insertBefore(chk, links[i].nextSibling);
}

如果正如对dbaseman 的回答的评论中提出的那样，您使用某些a元素作为锚点，您应该考虑id在现有元素上使用 s 作为内部导航的目标，因为虽然命名为空，但a它是一种非常古老的技术，甚至IE现在都支持使用ids了。

但是，如果无法更改，则可以更改上述内容以合并if检查：

var links = document.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    if (links[i].href) {
        var chk = document.createElement('input');
        chk.type = 'checkbox';
        chk.value = links[i].textContent || links[i].innerText; // or whatever...
        chk.name = chk.value.replace(/(\s+)/g, ''); // or whatever...
        links[i].parentNode.insertBefore(chk, links[i].nextSibling);
    }
}

此外，如果您希望将元素细化为a给定元素中包含的元素，只需使用特定节点代替document第一行：

var links = document.getElementById('onlyInThisElement').getElementsByTagName('a');

id首先使用of检索节点，onlyInThisElement然后仅在其中搜索div元素a。

Answer 3

您可以使用links集合获取页面中的所有链接。然后，您可以通过循环遍历集合并使用insertBefore和nextSibling或您希望使用的任何 jQuery 等效项来轻松附加一个复选框。

请注意，链接集合仅包括具有 HREF 属性的 A 元素，它不包括锚点（即具有 NAME 或 ID 且没有 HREF 的 A 元素）。