Как динамически создавать элементы в JavaScript

Я пытаюсь динамически создать теги для каждого подзаголовка (элемент h2), который есть в моем блоге, а затем заполнить эти теги текстом подзаголовка.

Вот что я пробовал до сих пор:

<script>

            const subheadings = document.querySelectorAll("h2");
            subheadings.forEach(function(x) {
              document.getElementById("contents").innerHTML=x;
              <a href='#' id="contents"></a>
            });
              
</script>

В результате ничего не появилось.

Любая помощь или совет, в каком направлении искать, будет очень признательна.

const subheading = document.querySelectorAll('h2');
 subheading.forEach(function(x) {              
   let xbe = x.innerText.split(' ');
   for (let i = 0; i<xbe.length;i++) {
   const div = document.getElementById('holder');
   let a = document.createElement('a');
   a.innerText = xbe[i];
   console.log( a.innerText); 
   div.append(a);
  }
    });

Вернуться на верх