2017-09-05 8 views
0

プラグインをよりモダンで使いやすくするために、プラグインを変更しようとしています。問題はアイコンです:私はそれを見えるようにするためにテキストでスパン要素を追加する必要があります。リンク内にspan要素を追加して、javacriptでアクセシビリティ(AA)にする

私のjavascriptは以下の通りです:私はそのよう.innerHTMLでHTMLを注入するために行を追加しようとしました

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

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

    return infoLink; 
} 

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; 
} 

しかし、それは動作しませんでした。なにか提案を?

UPDATE:

機能_setElementTextは以下の通りです:代わりに.innerHTML

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

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

「_setElementText」の定義に応じて、ここで問題が発生している可能性があります。 '_setElementText'の定義を含めると役に立ちます。私はあなたが "それはうまくいかない"ということを正確には知らないのですが、 '_setElementText'が' innerHtml'を設定してスパンに設定すると上書きされると思います。 – quetzaluz

+1

関数_setElementText(要素、テキスト){ // IE8はtextContentをサポートしていないので、innerTextにフォールバックする必要があります。 var supportsTextContent = 'textContent' in document.body; if(supportsTextContent){ element.textContent = text; } else { element.innerText = text; } } – Matto

答えて

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; 
} 
0

多分使用してみてください:

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

+0

ええ、私はクラスだけでなく、すべてを作成する必要があります。私はスパンを作成する必要があります、スパンのクラスとその中のいくつかのテキスト – Matto

関連する問題