document.body.innerHTML issue

Question

私は、他の開発者によって書かれた電子メールコンバーターを、自分のユーザー名と電子メールアドレスにフォーマットした電子メールコンバーターを持っています。 ページ[[ユーザー名]]を入力すると、ウェブページ上でクリック可能な電子メールアドレスが生成されます。username@gmail.com

今、私はPayPalのスキップをアクセシビリティナビゲーションのWebサイトに組み込もうとしています。 Pay Palのコードを追加した後、Tabキーを押すと、左上に「Skip to」リンクが表示されますが、リンクが機能しません。ドロップダウンメニューは表示されません。私のJavaScriptの電子メールコンバータにおいて https://github.com/paypal/skipto

コード行

document.body.innerHTML = emailConvert（document.body.innerHTML）があります。

これは問題であるようですが、PaypalコードもinnerHTMLをコードに使用しているためです。 この特定のコード行またはすべてのコードの解決策を探しています。

document.body.innerHTML = emailConvert（document.body.innerHTML）;

私は結果のないさまざまなソリューションを試しました。どんな助けも素晴らしいだろう。 コードは次のとおりです。

$(document).ready(function() { 
    (function() { 
    var domains = { 'n': 'gmail.com', 'p': 'yahoo.com', 's': 'comcast.net', 'k': 'att.net', 'b': 'aol.com', 'i': 'sbcglobal.net' }; 
    function renderEmail(str, user, domain, text) { 
     var email = (user.match(/@/)) ? user : user + "@" + (domain || domains["n"]); 
     if (domains[user.toLowerCase()]) { email = domain + "@" + domains[user.toLowerCase()]; } 
     return " <a href='mailto:" + email + "?Subject=" + document.title + "\"'>" + (text || email) + "</a>"; 
    } 
    function emailConvert(source) { return source.replace(/\[\[\s*([^\ [\,\|]*)\|?\s*([a-zA-Z0-9_\.-]+)?\s*()\]\]/g, renderEmail).replace(/\[\[\s*([^\[\,\|]*)\|?\s*([a-zA-Z0-9_\.-]+)?\s*\,{1}\s*([^\]]*)\s*\]\]/g, renderEmail); } 
    document.body.innerHTML = emailConvert(document.body.innerHTML); 
    $.fn.emailConverter = function() { this.innerHTML = emailConvert($(this).html(emailConvert($(this).html()))); } 
})(); 

}）;

Answer 1

innerHTMLは、要素内のHTMLの文字列表現を提供します。それらの要素にプログラムで関連付けられたイベントハンドラは、HTMLで表現されていないため、キャプチャされません。

innerHTMLをdocument.bodyに上書きしないでください。それはあなたの秘書が何かを書き留めるようにして、代わりにあなたの机の上のすべてをつかみ、それを窓の外に投げ出し、次にあなたのデスクトップ上で直接目的のメモをスクロールします。たとえ秘書があなたの電話の非常に正確な絵を机の上に描いても、それがうまくいかないと驚くべきではありません。

いいえ、完全な隠喩ではありませんが、うまくいけば私の意味を得ます。

代わりに、変更する特定のHTML要素を見つけたり、目的の場所に新しいHTML要素を挿入したりする必要があります。

などdocument.getElementById、document.querySelector、document.querySelectorAll、およびdocument.getElementsByTagNameなど、ページ上の既存の要素をつかむことができたことにより、異なる方法、たくさんあります。また、ページ上のすべての要素を徹底的にチェックしたい場合は、document.bodyの子ノードにドリルダウンすることもできます。

同様に、選択したHTML要素にHTMLを挿入するには、appendChildとinsertAdjacentHTMLの両方を含む複数の方法があります。特定の要素のinnerHTMLを操作することはできますが、子ノードにイベントリスナーが含まれている可能性がある場合は、子ノードに上書きするように注意してください。