Creating HTML-Elements with a Button

Question

I want to create a HTML-Element by pressing on a Button on the same page, but the Element won't appear after clicking.

my HTML:

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

and my JS:

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

My goal is to be able to create a custom form, so I will need to be able to create multiple Elements by clicking their respective buttons. Since I'm a total newbie I can't get my head wrapped around the right way to approach my problem.

Hints to the final approach are welcome.

EDIT: Problem solved. I accidentally mixed up two approaches to the Problem. Code works fine like this: 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);
}

Are there any errors in your console? Why is the button outside of the form and still has type="submit"? — Luca Kiebel
– Luca Kiebel, Commented Jul 4, 2018 at 7:49
Possible duplicate of Adding a button, with onclick function, via javascript/jquery — Nikola Lukic
– Nikola Lukic, Commented Jul 4, 2018 at 7:50
I would feels like the better approach will be to add in the HTML element in the form, hide it, and use javascript to only shows the content of the hidden elements. Something like this: w3schools.com/howto/… — Ng Sek Long
– Ng Sek Long, Commented Jul 4, 2018 at 7:52
@Teemu I accidentally mixed up two approaches. I got rid off the submit and used the button outside of a form. This cleared a lot of errors. — user10004359
– user10004359, Commented Jul 4, 2018 at 7:59

Suhas · Accepted Answer · 2018-07-04 07:50:02Z

1

You were not calling the function correctly in the HTML. Changing onclick="CreateNewDom" to onclick="CreateNewDom();" fixed the issue

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>

answered Jul 4, 2018 at 7:50

Suhas

5804 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prasad Kumarasinghe · Accepted Answer · 2018-07-04 07:55:13Z

0

Use Below,

 onclick="CreateNewDom()"

answered Jul 4, 2018 at 7:55

Prasad Kumarasinghe

10410 bronze badges

Collectives™ on Stack Overflow

Creating HTML-Elements with a Button

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related