Создание HTML-элементов с помощью кнопки

Question

Я хочу создать HTML-элемент, нажав кнопку на той же странице, но элемент не появится после нажатия.

мой HTML:

<button type="submit" name="e-h1" onclick="CreateNewDom">H1 Überschrift</button>
<form id="editor" method="post">
</form>

и мой JS:

function CreateNewDom() {
var DOMHeadingOne = document.createElement("input");
DOMHeadingOne.setAttribute("type", "text");
DOMHeadingOne.classList.add("e-h1");
document.getElementById("editor").appendChild(DOMHeadingOne);
}

Моя цель - создать пользовательскую форму, поэтому мне нужно будет создавать несколько элементов, нажимая соответствующие кнопки. Так как я новичок, я не могу правильно обернуть голову, чтобы решить мою проблему.

Подсказки для окончательного подхода приветствуются.

РЕДАКТИРОВАТЬ: Проблема решена. Я случайно перепутал два подхода к проблеме. Код работает нормально, как это: HTML:

<button name="e-h1" onclick="CreateNewDom()">H1 Überschrift</button>
<form id="editor" method="post">
</form>

JS:

function CreateNewDom() {
var DOMHeadingOne = document.createElement("input");
DOMHeadingOne.setAttribute("type", "text");
DOMHeadingOne.classList.add("e-h1");
document.getElementById("editor").appendChild(DOMHeadingOne);
}

Answer 1

Используйте ниже,

 onclick="CreateNewDom()"

Answer 2

Вы неправильно вызывали функцию в HTML. Изменение onclick="CreateNewDom" на onclick="CreateNewDom();" исправило проблему

function CreateNewDom() {
var DOMHeadingOne = document.createElement("input");
DOMHeadingOne.setAttribute("type", "text");
DOMHeadingOne.classList.add("e-h1");
document.getElementById("editor").appendChild(DOMHeadingOne);
}

<button type="submit" name="e-h1" onclick="CreateNewDom();">H1 Überschrift</button>
<form id="editor" method="post">
</form>