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

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

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

<script>

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

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

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

*** РЕДАКТИРОВАТЬ ***

Я обновил код до ответа, который был дан в ответах.

<div class = "col-3" id = "contents-table">
          <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('contents-table');
              let a = document.createElement('a');
              a.innerText = xbe[i];
              console.info( a.innerText); 
              div.append(a);
              }
                });
              
          </script>
        </div>

Надеюсь, это дает всю необходимую информацию.

Однако он по-прежнему не отображает текст элементов h2, но я думаю, что логика верна.

🤔 А знаете ли вы, что...
С JavaScript можно создавать интерактивные формы и проверять введенные пользователем данные.