如何实现点击按钮循环生成h1至h6标题元素？

现有代码点击按钮仅能生成h1标题，需修改为每次点击依次生成h1、h2、h3、h4、h5、h6，之后循环回到h1。以下是修改后的代码及说明：

修改后的JavaScript代码 #

let index = 1

window.addEventListener('load', () => {
  document.getElementById('btnKnop1').addEventListener('click', () => {
    // 动态生成对应层级的标题元素
    let newElement = document.createElement(`h${index}`);
    let node = document.getElementById('txtElement').value;
    let newNode = document.createTextNode(node)
    newElement.appendChild(newNode)
    console.log(newElement)
    document.getElementById('divResult').appendChild(newElement)
    
    // 更新index，超过6则重置为1实现循环
    index = index === 6 ? 1 : index + 1
  })
})

HTML代码（无需修改） #

<input type="text" id="txtElement">
<button id="btnKnop1">Toevoegen koptekst</button>
<div id="divResult"></div>

关键修改点 #

• 动态创建标题：将固定的createElement('h1')改为createElement(h${index})，通过index变量控制标题层级
• 循环逻辑：每次点击后更新index，当index等于6时重置为1，否则自增1，实现h1到h6的循环生成

内容的提问来源于stack exchange，提问作者user22934804