How can I make my div appear with createElement

Question

I am trying to make another div right under the existing div in the HTML

<html>
    <head>
        <title>    
            Media Player
        </title>
        <script src="script.js"></script>
    </head>
    <script>
            makeOscarPlayer(document.getElementById("my-video"))
    </script>
    <body>
        <div class="my-player">
            Hello! 
        </div>
    </body>
</html>

function makeOscarPlayer(){
   var div = document.createElement("div");
    div.innerHTML = `
    hello
`
}

can someone explain to me what I am doing wrong? I am a self-taught developer sorry if my code is not perfectly organized still learning

Ele · Answer 1 · 2018-03-21T19:39:15.430

1

You need to append that new element to a specific parent, in your case to my-video.

The function appendChild appends the new element to a parent element.

function makeOscarPlayer(parent) {
  var div = document.createElement("div");
  div.innerHTML = 'Hello from Ele';

  parent.appendChild(div);
}

makeOscarPlayer(document.getElementById("my-video"))

#my-player {
  border: 1px dashed green;
  padding: 5px;
  margin: 5px;
  width: 300px;
  background-color: #f1f1f1
}

#my-video div {
  border: 1px dashed green;
  padding: 5px;
  margin: 5px;
  width: 200px;
  font-weight: 700;
}

<div id="my-player">
  Hello!
  <div id="my-video">
  </div>
</div>

edited Mar 21 '18 at 19:39

answered Mar 21 '18 at 19:25

Ele

33,468
7
37
75

Okay so I ran your code snippet, then I am trying it on my side of the code editor and it is not working. :( I feel like I am doing something wrong. I copied your code to a new file and the HTML content shows but the javascript div is still not showing – Mar 21 '18 at 19:49
I read through the console and this was the error I received, Uncaught TypeError: Cannot read property 'appendChild' of null – Mar 21 '18 at 19:52
@OscarP. can you post the current HTML/Code/JS? – Ele Mar 21 '18 at 19:58

score 1 · Accepted Answer · answered Mar 21 '18 at 19:53

You are calling the makeOscarPlayer() function before you are creating it.

You need to wrap the makeOscarPlayer() function declaration in a script tag.

You are passing in document.getElementById("my-video") as a parameter to makeOscarPlayer(), but there is no HTML element with an id of 'my-video'. You are giving the function a parameter of null, while the function declaration has no parameters.

You need to tell the script where to put the new element. To do that, you grab an existing element and use parentNode and insertBefore

Here is a barebones version that I got working for your reference:

<html>
  <head>
      <title>    
          Media Player
      </title>
  </head>
  <script>
  </script>
  <body>
      <div id="my-player">
          Hello! 
      </div>
  </body>
</html>

<script type="text/javascript">
  function makeOscarPlayer(){
    var div = document.createElement("div");
    div.innerHTML = `hello`;

    // This grabs the element that you want to create a new element by
    var existingDiv = document.getElementById("my-player");

    // This tells the script where to put the new element
    existingDiv.parentNode.insertBefore( div, existingDiv.nextSibling);
  }

  // Must be called in the same script block or after the script holding the function declaration is loaded
  makeOscarPlayer();
</script>

For more information on how parentNode and insertBefore work, see this Stack Overflow question

score 0 · Answer 3 · answered Mar 21 '18 at 19:27

It's a good start, but you're calling the function incorrectly and your function isn't adding anything to the page.

we use appendChild to add a node to the page.

In your function you create and add text to a div, but you don't return the node you made(and also you didn't close your line of code with a semi-colon so I added that too) but this should work:

<html>

<head>
  <title>
    Media Player
  </title>
</head>

<body>

  <div class="my-player">
    Hello!
  </div>

  <script>
    function makeOscarPlayer() {
      var div = document.createElement("div");
      div.innerHTML = `hello`;
      return div;
    }
    document.getElementById("my-video").appendChild(makeOscarPlayer())
  </script>
</body>

</html>

    function makeOscarPlayer() {
      var div = document.createElement("div");
      div.innerHTML = `hello`;
      return div;
    }
    document.getElementById("my-video").appendChild(makeOscarPlayer())

<html>

<head>
  <title>
    Media Player
  </title>
</head>

<body>
  <!-- added my-video div -->
  <div id="my-video"></div>

  <div class="my-player">
    Hello!
  </div>

</body>

</html>

How can I make my div appear with createElement

3 Answers3