Question

Is it possible to do this:

<a class="a-link" href="/targetlink" target="_blank" rel="nofollow">Download</a>
<a class="a-link" href="/targetlink" target="_blank" rel="nofollow">Alternative</a>

replaced automatically using JavaScript when the page has finished loading

<input type="button" class="a-link" onClick="parent.open('/targetlink')" formtarget="_blank">Download</input>
<input type="button" class="a-link" onClick="parent.open('/targetlink')" formtarget="_blank">Alternative</input>

Answer 1

您可以通过删除现有标签并创建另一个具有相同属性的标签来做到这一点。

或者您可以简单地通过replaceWith()来做到这一点。

$('#target').replaceWith('<newTag>' + $('target').html() +'</newTag>')

Answer 2

文档加载后，在目标上循环，为找到的每个对象创建一个新元素，并将初始元素替换为新元素：

window.addEventListener('load', function() {
    document.getElementsByClassName('a-link').map(function(elem){
        var newElem = document.createElement('input');
        newElem.type = 'button';
        newElem.classList = item.classList;
        newElem.target    = item.target;
        newElem.addEventListener('click', function(){ /* define click event here */ })
    });

    elem.parentElement.replaceChild(newElem, elem);
});

可以使它更可靠，但是对于您的问题范围，它应该提供适当的答案。

更改<a> tag to <input/> tag onClick with JavaScript

2 个答案: