javascript why i cannot appendchild to html div using javascript function

Question

i need to append a child control to html element using javascript, the problem is that the child is appear when call the function and disappear directely the child must be in a form tag

this is the code when i append child to the html elemet

<html>
 <body>
  <form  >
<button onclick="create()">Create Heading</button>

</form>

    <script>
  function create() {
    var h1 = document.createElement('h1');
    h1.textContent = "New Heading!!!";
    h1.setAttribute('class', 'note');
    document.body.appendChild(h1);
  }
</script>
   </body>
   </html>

the element h1 is added to the layout appear and disappear immediately but when i remove the <form> it works perfectly

no idea, reduce it to a [mcve] first? the code mostly looks fine (albeit violating JS naming conventions all over the place) except for `options.text`, which should be `options.textContent`, and `for ... in ...` for arrays, which you should _never_ use, and should be `for ... of ... `, or `arr.forEach(...)`. — Mike 'Pomax' Kamermans, Nov 14 '20 at 20:43
the select element is filled and displayed correctely but disappeared after millisecond seems like the page is refreshing — Malo, Nov 14 '20 at 20:50
Probably you add your select to the dom element (`tab_logic`) generated and controlled by one of the JS frameworks like React or Vue? — Maxim Dyuzhinov, Nov 14 '20 at 20:50
no i didnt use this in my code , this is the div i want to add element to it `
` — Malo, Nov 14 '20 at 20:52
again: we don't know, because you're not telling us everything. Please go an take the time to form a [mcve]. Usually, while reducing you discover the problem all on your own and you don't even need us, but if the problem is still there _after_ full reducing, now we can help, because what you're telling us is _the only details_ that matter. Right now, that is very much not true. — Mike 'Pomax' Kamermans, Nov 14 '20 at 20:57
please check the question again, the problem is that i cannot add element inside `
` tag, it work when i remove form — Malo, Nov 14 '20 at 21:14
also a form action would usually be in the form tag eg.
so adding it to the button suggests form isn't needed, why does it have to be in a form? — tagliatelli, Nov 14 '20 at 21:35

Drago96 · Accepted Answer · 2020-11-16T09:19:22.193

It looks like the form element is submitting when you press the button, refreshing the page and making the header disappear. You should probably ask yourself: should I really need a form? Are there some inputs that should be handled by the server?

If you really need it, then you can try to prevent the form from submitting

Also, as pointed out in this SO Question you can prevent the button to submit the form by specifying its type as 'button'.

score 1 · Answer 2 · answered Nov 14 '20 at 21:28

Agreeing with @Drago96 Form submits and page refreshes.

What is the point of the form. if you are only appending an element

<body>
    <button onclick="create()">Create Heading</button>
    <script>
        function create() {
            var h1 = document.createElement('h1');
            h1.textContent = "New Heading!!!";
            h1.setAttribute('class', 'note');
            document.body.appendChild(h1);
        }
    </script>
</body>

</html>

javascript why i cannot appendchild to html div using javascript function

2 Answers2