如何在javascript中设置innerHTML？

如何在javaScript中应用循环并将所有li附加到paginationWrapper innerHTML中。我尝试了下面的方法，它通过替换以前的内部html只附加了一个

这是我的HTML

<nav aria-label="Page example">
    <ul class="pagination"></ul>
</nav>

const paginationWrapper=document.querySelector（“.pagination”）；
设currentBatch=1；
让pageButtonList=[1,2,3,4,5]；
paginationWrapper.innerHTML=“”；
对于（让page=0；page编辑

只需使用
+=
字符串压缩运算符附加
元素

const paginationWrapper = document.querySelector(".pagination");
let currentBatch = 1;
let pageButtonList = [1,2,3,4,5];
paginationWrapper.innerHTML= "";
for (let page = 0 ; page <= pageButtonList.length ; page++){
    if(pageButtonList[page] === currentBatch){
        paginationWrapper.innerHTML += `<li className="page-item active"><button onclick="clickedButtonData(event)" value=${pageButtonList[page]} className="page-link">${pageButtonList[page]}</button></li>`;
    } else {
        paginationWrapper.innerHTML += `<li className="page-item"><button onclick="clickedButtonData(event)" value=${pageButtonList[page]}className="page-link">${pageButtonList[page]}</button></li>`;
    }
}

const paginationWrapper=document.querySelector（“.pagination”）；
设currentBatch=1；
让pageButtonList=[1,2,3,4,5]；
paginationWrapper.innerHTML=“”；
对于（让page=0；page您一直在
paginationWrapper
上覆盖相同的
innerHTML
。我认为您想使用或可能使用
paginationWrapper.innerHTML=paginationWrapper.innerHTML+'

或者，您可以将子元素的完整列表设置为字符串，然后使用
.innerHTML

const paginationWrapper = document.querySelector(".pagination");
let currentBatch = 1;
let pageButtonList = [1,2,3,4,5];
let paginationtag = '';
paginationWrapper.innerHTML= "";
for (let page = 0; page <= pageButtonList.length; page++){
    if(pageButtonList[page] === currentBatch){
        paginationtag += `<li className="page-item active"><button onclick="clickedButtonData(event)" value=${pageButtonList[page]} className="page-link">${pageButtonList[page]}</button></li>`;
    } else {
        paginationtag += `<li className="page-item"><button onclick="clickedButtonData(event)" value=${pageButtonList[page]}className="page-link">${pageButtonList[page]}</button></li>`;
    }
}
paginationWrapper.innerHTML = paginationtag;

paginationWrapper.innerHTML=pageButtonList.map（页面=>{
如果（页面按钮列表[页面]==当前批次）{
返回`
${page}
`；
}否则{
返回`
${page}
`
}
}).加入（“”）；
它不起作用，因为
innerHTML
删除并替换了元素的所有子体

最简单的解决方案就是像
paginationWrapper.innerHTML+=…

但是，我不得不说，这不是向DOM添加enw节点元素的最佳方式。
查看
wrapper.appendChild
方法。
您的代码不会追加
innerHTML
，因为根据定义
innerHTML
会用新数据重写select tag by属性中的所有元素

因此，简单的解决方案是连接所有li标记，然后使用
innerHTML

const paginationWrapper = document.querySelector(".pagination");
let currentBatch = 1;
let pageButtonList = [1,2,3,4,5];
let paginationtag = '';
paginationWrapper.innerHTML= "";
for (let page = 0; page <= pageButtonList.length; page++){
    if(pageButtonList[page] === currentBatch){
        paginationtag += `<li className="page-item active"><button onclick="clickedButtonData(event)" value=${pageButtonList[page]} className="page-link">${pageButtonList[page]}</button></li>`;
    } else {
        paginationtag += `<li className="page-item"><button onclick="clickedButtonData(event)" value=${pageButtonList[page]}className="page-link">${pageButtonList[page]}</button></li>`;
    }
}
paginationWrapper.innerHTML = paginationtag;

const paginationWrapper=document.querySelector（“.pagination”）；
设currentBatch=1；
让pageButtonList=[1,2,3,4,5]；
让paginationtag=''；
paginationWrapper.innerHTML=“”；
对于（让page=0；page如果我的答案解决了您的问题，请随意将其标记为正确答案。否则，我们需要一些调试信息（可能有一些例外）从开发工具控制台。
innerHTML
是非常不适合执行此任务的工具。请查看.Ops my bad，在键入i wrote错误时出错，但我认为它仍然无法将所有
li
添加到innerHTMLIt中。如果覆盖，则无法工作。我认为append是在运行此pro时创建新li和按钮时的最佳选择gram和debug它确实创建了内部HTML，但它不可见。我想这可能是代码中的其他内容，可能是隐藏它的CSS样式。简单的复制是
document.getElementById（'some-id'）。innerHTML=[1,2,3,4]。map（n=>''+n+'
'）。如果您给它一个有效的id，那么在这个页面上运行它的join（'
）