Question

我正在尝试修改插件，以使其更加现代化和可访问。问题是图标：我需要添加一个包含一些文本的span元素，以使其可读但不可见。

我的javascript如下：

function _createInformationLink(linkText, linkHref) {
    var infoLink = document.createElement('a');

    _setElementText(infoLink, linkText);
    infoLink.href = linkHref;
    infoLink.target = '_blank';
    infoLink.style.marginLeft = '8px';

    return infoLink;
}

我尝试添加一行，以便用这样的.innerHTML注入html：

function _createInformationLink(linkText, linkHref) {
    var infoLink = document.createElement('a');

    _setElementText(infoLink, linkText);
    infoLink.href = linkHref;
    infoLink.target = '_blank';
    infoLink.style.marginLeft = '8px';
    infoLink.innerHTML = "<span class='sr-only'>Close cookie policy</span>";

    return infoLink;
}

但它没有用。有什么建议吗？

更新：

函数_setElementText如下：

function _setElementText(element, text) {
    var supportsTextContent = 'textContent' in document.body;

    if (supportsTextContent) {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}

Answer 1

您可以生成元素，然后将其与文本一起附加：

function _createInformationLink(linkText, linkHref) {
    var infoLink = document.createElement('a');

    _setElementText(infoLink, linkText);
    infoLink.href = linkHref;
    infoLink.target = '_blank';
    infoLink.style.marginLeft = '8px';
    var srSpan = document.createElement('span')
    srSpan.innerText = 'Close cookie policy'
    srSpan.classList.add('sr-only')

    infoLink.appendChild(srSpan);

    return infoLink;
}

Answer 2

而不是.innerHTML可以尝试使用：

infoLink.classList.add('sr-only')

在链接中添加span元素以使其可以通过javascript访问（AA）

2 个答案: