Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Appending Nodes

Marcos Raj
PLUS
Marcos Raj
Courses Plus Student 5,979 Points
Posted by Marcos Raj
Marcos Raj
Courses Plus Student 5,979 Points

How do i create a new div in my html page using js?

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/main.css">

  </head>
  <body> 
      <input type="text" class="inputItem">
      <button class="btn">Click to Insert</button>
   <script>
let divtag = '<div></div>'; // Creating a div tag.
document.write(divtag); // Printing The div

/******Declaring**************/
const inputItem = document.querySelector('.inputItem');
const button = document.querySelector('.btn');


/**********Event**************/

button.addEventListener('click', () => { 
    let div = document.getElementsByTagName('div'); // Want to use the same 'div' which i have created above. How do i do that?
    let heading = document.createElement('h1');
    heading.textContent = inputItem.value;
    div.appendChild(heading);
    inputItem.value = '';
});</script>
  </body>
</html>

//ERROR: app.js:30 Uncaught TypeError: div.appendChild is not a function
    at HTMLButtonElement.button.addEventListener

<!-- Copies the output from the console -->
<html>
<head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/main.css">

  </head>
  <body> 
     <!--<button id="btn">HIDE</button>
   <div class ="divMenu">
        <p class="description">Things that are purple:</p>
        <input type="text" class="description">
        <button class="description"> Change </button>
        <ul>
          <li>grapes</li>
          <li>amethyst</li>
          <li>lavender</li>
          <li>plums</li>
        </ul>
      </div>-->

      <input type="text" class="inputItem">
      <button class="btn">Click to Insert</button>
   <script src="app.js"></script>


<div></div>  <!-- The which i have created. Also Why its coming after the script tag-->
</body>
</html>

Why script tag not trigger when i keep that in head tag.

3 Answers

Austin Britton
Austin Britton
6,531 Points
Austin Britton
Austin Britton
6,531 Points

Hello Marcos! I was looking over your code and question and think I've found your solution!

let div = document.getElementsByTagName('div');

should be

let div = document.getElementsByTagName('div')[0];

By using the 'getElementsByTagName', you are asking for a collection of elements and a collection of elements you will receive ( in the form of an array )! Even if you only have one item that matches the element in question, javascript will return a collection of one. You'll find that by using array notation, you can access the elements of your collection, specifically the zeroth element or 'document.getElementsByTagName('div')[0]'.

I hope this helps!

Marcos Raj
PLUS
Marcos Raj
Courses Plus Student 5,979 Points
Marcos Raj
Marcos Raj
Courses Plus Student 5,979 Points

Thank A alot! Its working. Also can you please explain me, sometimes my script does not work if place somewhere above in the body or in the head tag?

Austin Britton
Austin Britton
6,531 Points
Austin Britton
Austin Britton
6,531 Points

No Problem!

As far as your script tag not working it could be a number of things. It really depends on what it is your script tag is doing. You should be able to run your script from anywhere within the opening and closing head tags, or within the opening and closing body tags. If its placed outside of these sections you find yourself a bit of trouble. :P. If thats not the case, feel free to post a bit of code and I would gladly look over it!