JavaScript document.createElement not showing any results

Question

I am trying to help a friend with making his website school project, but I ran into a problem. It was meant to have 3 text boxes with a button that can add more text boxes, I tried with document.write but it overwrites the whole page so I looked it up and I found out about document.createElement, which doesn't seem to work as well.

I don't know if anything in my code is incorrect.

 <!DOCTYPE html>
<html>
    <head>
        <style>
            .input {
                margin-top: 50px;
            }

            .input .submit {
                float: left;
            }
            .add {
                margin-left: 100px;
                margin-top: 50px;
                width: 50px;
                height: 50px;
                font-size: 30px;
            }

            .gen {
                float: right;
                margin-right: 100px;
                width: 400px;
                height: 50px;
                font-size: 25px;
            }

            .output {
                position: fixed;
                margin-top: 100px;
                float: right;
                margin-left: 400px;
            }

        </style>

        <script language="javascript" type="text/javascript">

                 var input = document.createElement("<p>Hello</p>");
                 var container = document.getElementsByClassName("buttons");


            container.appendChild(input);


        </script>

    </head>

    <body>

        <form class="buttons">
        <input type="text" class="input">
        <input type="submit" class="submit">
        <br>

        <input type="text" class="input">
        <input type="submit" class="submit">
        <input type="button" class="gen" value="Click to generate a random word">
        <input type="text" class="output">
        <br>

        <input type="text" class="input">
        <input type="submit" class="submit">
        <br>


        </form>

        <input type="button" class="add" value="+" >

    </body>
</html>

`container` is an array... ? – Jonas Wilms Apr 13 '18 at 20:10 — Jonas Wilms, Apr 13 '18 at 20:10

zfrisch · Answer 1 · 2018-04-13T20:22:29.207

You're passing incorrect parameters to document.createElement - Documentation for this method can be found here: document.createElement

document.createElement accepts a tag name, but the other properties you have to add on through object manipulation.

var p = document.createElement("p");
p.textContent = "Hello";
document.body.appendChild(p);

Secondly you are using var container = document.getElementsByClassName("buttons") which is incorrect as well. You're trying to get the container element but asking for it to get a list of elements with the class name of "buttons". This returns an array and requires you to select the first option that's returned e.g. container[0].appendChild

In truth you should be using an ID instead of a class name. ID's are meant to be unique so that singular elements can be easily found within a document, class names are meant to be used to alter multiple elements. Given your situation though, you should alter your initial query so that it just returns the singular element using document.querySelector(".buttons")

var container = document.querySelector(".buttons");

All Together:

var p = document.createElement("p");
p.textContent = "Hello";

var container = document.querySelector(".buttons");
container.appendChild(p);

<form class="buttons">

  

</form>

A word of advice: judging from the code you've presented here you may not know the language well enough to assist in teaching it to others. That's not saying you don't have the aptitude or the ability, but it appears you need to spend more time studying the material before getting to that point.

score 0 · Answer 2 · answered Apr 13 '18 at 20:12

You have a couple of issues, the first is that when your script runs, there are no elements for it to find, so you need to wait for the document to load using something like window.onload = function() { /* ... */ }. The second is the getElementsByClassName returns a HTMLCollection (essentially an array of nodes). You have to get the one that you want, or else the method appendChild won't exist (since the HTMLCollection has no such method). Also, createElement takes the name of the element, in this case p, and then you can use setInnerHTML to set the contents.

Your code should look something like:

window.onload = function() {
     var input = document.createElement("p");
     input.innerHTML = 'Hello';
     var container = document.getElementsByClassName("buttons");
     container[0].appendChild(input);
};

If your script is simply moved to just before the closing `body` tag, there won't be a need to set up a `load` event handler (and, in this case, it should be a DOMContentLoaded event handler for a better UI). Also, `innerHTML` shouldn't be used when the content doesn't contain any HTML, use `textContent` instead. Lastly, `getElementsByClassName()` probably shouldn't be used at all here because it returns a "live" node list, which is very expensive in the first place, but makes no sense when you only want one element. `querySelector()` is better here. — Scott Marcus, Apr 13 '18 at 20:18

JavaScript document.createElement not showing any results

2 Answers2