JavaScript生成的代码和屏幕阅读器

我请求你帮助我，我完全被这个问题困住了

我想使我的代码可以通过键盘导航，并可用于屏幕阅读器设备。但我有几个问题

这是我在JS中的代码：

function changeText()
{
 document.getElementById('div1').innerHTML = '<input id="btn2" type="button" onclick="changeText2()" value="Change Text2" />';
 document.getElementById('btn1').setAttribute("aria-hidden",true);
 document.getElementById('div1').focus();
}
function changeText2()
{
 document.getElementById('div1').innerHTML = '<input id="btn3" type="button" onclick="changeText()" value="Change Text" />';
 document.getElementById('btn1').setAttribute("aria-hidden",true);
}

---

我为自己感到骄傲：）

把焦点放在你的按钮上：

$("#btn1").focus();

在纯JS中：

document.getElementById('btn1').focus();

---

我手边没有屏幕阅读器，所以测试起来很棘手，但是你可能会更幸运地更换一个按钮，而不是更换它并专注于按钮本身

<div id="div1">
    <button type="button" id="btn1">Change Text</button>
</div>

---

我忘了提，但我试过了。我尝试了很多变化，比如用btn1代替了btn2（相对而言），但没有结果。你能编辑你的答案吗？这样它就可以工作了，因为我尝试了，但没有。而且，试着玩它，也没什么帮助。文本不是changing@jfanderson-好的，试试看。我把它放进了一个盒子里，这样你就可以看到它在银行工作了！：）工作完美！如果希望屏幕阅读器可以访问该按钮，我不认为将

aria hidden

属性设置为true有什么意义。对于Adam，我是在显示

btn2

时为

btn1

设置的。因为我真的不知道屏幕阅读器是否会读取JS生成的默认值（硬编码）

btn1

（或

btn3

）。但在James Long的回答中有“隐藏的咏叹调”，我认为这并不重要，因为即使我能理解它也应该被删除（我是新来的：），对Alteyss来说，你怎么能编辑我的问题？如果焦点不在你身上，请考虑编辑你的答案，因为James Long的答案有焦点。

document.getElementById('btn1').focus();

<div id="div1">
    <button type="button" id="btn1">Change Text</button>
</div>

document.addEventListener('DOMContentLoaded', function () {

    function changeText(btn) {

        btn.textContent = btn.textContent === 'Change Text'
            ? 'Change Text2'
            : 'Change Text';
        btn.setAttribute('aria-hidden', true);
        btn.focus();

    }

    document.getElementById('btn1').addEventListener('click', function (e) {
        changeText(e.target);
    }, false);

}, false);