Creating a div within an existing div in javascript issues

Question

I have a problem, I wanted to create a div in html as a container and in javascript create new divs within the container based on a number input from a user prompt. My html and javascript look like this. HTML:

<!doctype html>
<html>
    <head>
      <link rel="stylesheet" href="stylesheet.css">
      <title>Sketchpad</title>
    </head>
<body>

    <button type="button">Reset</button>

    <div class= "container">



    </div>


    <script src="javascript.js"></script>
    <script src="jQuery.js"></script>
</body>

JS

var row = prompt("Enter number of rows:");
var column = prompt("Enter number of columns:");


function createGrid(){

var cont = document.getElementsByClassName('container');

for(i=1; i<column; i++){

    var sketchSquare = document.createElement('div');
    cont.appendChild(sketchSquare);
}

}
createGrid(column);

I end up with this error: Uncaught TypeError: cont.appendChild is not a function. I imagine this is something to do with the getElementsByClassName?

I do have a solution which involves creating the container div in javascript and appending the smaller squares inside the container div. I was just curious as to why my first soltuion didn't work?

Zargold · Accepted Answer · 2016-03-20T21:06:44.783

cont[0].appendChild(myDiv) is a function. When you document.getElements By Class Name as the name implies you are getting many elements (an array of sorts) of elements and this array don't have the same functions as each of its elements.

Like this:

var thinkers = [
{think: function(){console.log('thinking');}
];

thinkers don't have the method .think but thinkers[0].think() will work.

try this: open your javascript console by right clicking and doing inspect element: then type:

var blah = document.getElementsByClassName('show-votes');
blah[0].appendChild(document.createElement('div'));

It works! also if you want to use jQuery which I do see you added...

you can do:

var cont = $('container');
cont.append('<div class="sketchSquare"></div>');

Try that out by doing this:

First get an environment that has jQuery.
Hmm maybe the jQuery docs have jQuery loaded!
They do: http://api.jquery.com/append/.
Open the console there and at the bottom where the console cursor is type: $('.signature').append('<div style="background: pink; width: 300px; height: 300px"></div>');
You'll notice that you add pink boxes of about 300px^2 to 2 boxes each of which have the "signature" class.

By the way, prompt gives you a string so you'll have to do row = Number(row); or row = parseInt(row, 10); and another thing don't use that global i do for(var i = 0; ...

Ah, thank you. I should have realised it was an array - I see where I went wrong now! Thanks for the jQuery too, I'm trying to write it first in javascript then jQuery so I know what's going on behind the scenes. — , Mar 20 '16 at 22:04

score 0 · Answer 2 · answered Mar 20 '16 at 20:49

var cont = document.getElementsByClassName('container');

Because that^ doesn't return a node, it'll return an HTMLCollection.

https://www.w3.org/TR/2011/WD-html5-author-20110705/common-dom-interfaces.html#htmlcollection-0

You need to pick an individual node from that collection before appending.

score 0 · Answer 3 · edited May 23 '17 at 12:31

There could be a couple of issues that could cause this. Without fully giving the answer here's what it could be at a high level.

Your script is ran before the DOM is fully loaded. Make sure that your script is ran after the DOM is present in the page. This can be accomplished using either the DOMReady event ($(document).ready equivalent without jQuery) or simply making sure your script tag is the last element before the closing body tag. (I usually prefer the former)
When you utilize document.getElementsByClassName('container') (https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) this method returns an array therefore you would either need to apply the operation to all elements of the result or just select the zero-th as document.getElementsByClassName('container')[0]. As an alternative, if you would like to be more explicit you could also place an id on the container element instead to more explicitly state which element you would like to retrieve. Then, you would simply use document.getElementById([id]) (https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) and this would get back a single element not a collection.
The result of prompt is a string. Therefore you would have to first parse it as an integer with parseInt(result, 10) where 10 is simply the radix or more simply you want a number that is from 0-10.

Thanks, really helpful. I ddin't realise it was storing an array! — , Mar 20 '16 at 22:06

score -1 · Answer 4 · answered Mar 20 '16 at 20:48

-1

You should include jquery library before your script, it`s important

<script src="jQuery.js"></script>
<script src="javascript.js"></script>

answered Mar 20 '16 at 20:48

Lunin Roman

2,152
4
16
43

This will not solve the issue by itself. I also would not unnecessarily include something as heavy as JQuery without a necessity other than checking for DOM ready. – dmcqu314 Mar 20 '16 at 20:51

Creating a div within an existing div in javascript issues

4 Answers4