28 thoughts on “JavaScript Tutorial for Beginners – 36 – Creating a new element

  • February 5, 2020 at 17:24
    Permalink

    Hi, EJ
    I have a problem with the javascript code. When I have some texts with () or "", the code doesn't run. And after I did that, the createTextNode won't run any more. I don't know why.

  • February 5, 2020 at 17:24
    Permalink

    the most amazing channel on youtube. Such an amazing teacher, everything becomes crystal clear after watching your tutorials sir.Thank you!!!

  • February 5, 2020 at 17:24
    Permalink

    In the place of element = document.createElement("p"); can we replace paragraph = document.createParagraph("P"); .Will it work?

  • February 5, 2020 at 17:24
    Permalink

    OMG it worked ..!!

    ok but yet another question arrives does the sequence matters ?

    i mean if
    1:1st i'd create a element
    2:then text
    3: and then append it with the element
    4: and then finally append it with the div tag ?

    wouldn't be better ? or the sequence doesn't actually matters?

  • February 5, 2020 at 17:24
    Permalink

    Question: Will it work if I declare the main div as class="main" instead of giving it an "id" in HTML, and then calling it in javaScript by getElementsByClassName("main"); instead of getElementById("main");

  • February 5, 2020 at 17:24
    Permalink

    Thank you so much for your videos! I have been following from the beginning of your series. I do have a question if you wouldn't mind addressing. To practice, I have been going to various resources and was wondering if you could shed some light on how this particular code executes without having a function defined. Thank you!

    <!DOCTYPE html>
    <html>
    <body>

    <p>Hello World!</p>

    <p>The DOM is very useful.</p>
    <p>This example demonstrates the <b>getElementsByTagName</b> method</p>

    <p id="demo"></p>

    <script>
    var x = document.getElementsByTagName("p");
    document.getElementById("demo").innerHTML =
    'The first paragraph (index 0) is: ' + x[0].innerHTML;
    </script>

    </body>
    </html>

  • February 5, 2020 at 17:24
    Permalink

    this is my Html code with inline script for the same code but it still doesn't work

    <!DOCTYPE html>
    <html lang="en-us">

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Batman Fan Club</title>
    <link rel="stylesheet" href="styel.css" type="text/css">
    <script>
    function hereNew(){
    var el = document.createElement("p");
    var my = document.getElementsById("my");
    my.appendChild(el);
    var t = document.createTextNode("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit sint quasi, exercitationem");
    el.appendChild(t);
    }
    </script>
    </head>

    <body>
    <div id="header">
    <h3>BATMAN FAN CLUB</h3> </div>
    <div id="navbar">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="forum">Forums</a></li>
    </ul>
    </div>
    <div class="sideright">
    <h2>Batman Series</h2>
    <p>1989 – The Batman</p>
    <p>1991 – The Batman and the Joker</p>
    <p>1995 – Batman and Robin</p>
    <p>2005 – Batman Begins</p>
    <p>2008 – The Dark Knight</p>
    <p>2013 – The Dark Knight Rises</p>
    <p>2016 – Batman Vs Superman</p>
    </div>
    <div class="sideright">
    <h2>Batman Series</h2>
    <p>1989 – The Batman</p>
    <p>1991 – The Batman and the Joker</p>
    <p>1995 – Batman and Robin</p>
    <p>2005 – Batman Begins</p>
    <p>2008 – The Dark Knight</p>
    <p>2013 – The Dark Knight Rises</p>
    <p>2016 – Batman Vs Superman</p>
    </div>
    <div> <img class="imagesidebar" src="2016-04-01-1459488050-1567099-bvs.jpg"> </div>
    <div id="my">
    <h1>The Dark Knight Rises</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati asperiores, iure sint quam possimus magnam rerum doloremque impedit alias ea ducimus laborum quia veritatis temporibus quisquam id totam. Eum, deserunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, in, iusto. Temporibus ab iusto provident harum voluptatem, consequuntur maxime doloremque quisquam beatae sapiente error veritatis, amet aspernatur porro omnis, animi!</p>
    <h1>Batman Begins</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati asperiores, iure sint quam possimus magnam rerum doloremque impedit alias ea ducimus laborum quia veritatis temporibus quisquam id totam. Eum, deserunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <br>
    <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, in, iusto. Temporibus ab iusto provident harum voluptatem, consequuntur maxime doloremque quisquam beatae sapiente error veritatis, amet aspernatur porro omnis, animi!</p>
    </div>
    <div id="my">
    <h1>Batman Vs Superman</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati asperiores, iure sint quam possimus magnam rerum doloremque impedit alias ea ducimus laborum quia veritatis temporibus quisquam id totam. Eum, deserunt?</p>
    <h1>Batman and Robin</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati asperiores, iure sint quam possimus magnam rerum doloremque impedit alias ea ducimus laborum quia veritatis temporibus quisquam id totam. Eum, deserunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <h1>The Justice League</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, in, iusto. Temporibus ab iusto provident harum voluptatem, consequuntur maxime doloremque quisquam beatae sapiente error veritatis, amet aspernatur porro omnis, animi!</p>
    </div> &nbsp;&nbsp;
    <button onclick="hereNew()">Click to Read More</button>
    <div id="footer">
    <ul>
    <li><a href="">About</a></li>
    <li><a href="">Careers</a></li>
    <li><a href="">Helpdesk</a></li>
    <li><a href="">Contact Us</a></li>
    </ul> &copy; 2018 Batmanfanclub.com. All Rights Reserved. </div>
    </body>

    </html>

  • February 5, 2020 at 17:24
    Permalink

    Hello, sir, I have a doubt that, when we click our button, again and again, it show the same paragraph again and again.

  • February 5, 2020 at 17:24
    Permalink

    this is my html code
    <!DOCTYPE html>

    <html>

    <head>
    <script src="jscode.js"></script>
    <link type="text/css" rel="stylesheet" href=stylesheet.css"

    </head>

    <body>

    <div id="main">
    <h2>HANIBAL – THE BATTLE OF CANNE</h1>
    <p>
    After defeating the Romans at the Battle of Lake Trasimen, Hannibal now moved his forces down south. There was a panic in Rome and Quintus Fabius Maximus was appointed dictator to deal with Hannibal. Fabius, however, refused to meet ith Hannibal in the open field and this strategy became highly unpopular in Rome. Romans were used to attacking, not hifing. The Romans were forced to go on the offensive ater Hannibal positioned his forces between Rome and it's vital grain supply. This setup the epic Battle of Canne. Here Hannibal defeteated the Romans inflicting the worst single day defeat in Rome's history.
    </p>
    <p>
    The Romans were then forced to retreat to Rome. It was a total defeat.
    </p>
    <h2>ATREMATH OF THE BATTLE OF CANNAE</h1>
    <p>
    After the horrific defeat at the Battle of Cannae, the Romans reinstituted Fabius avoidance strategy. The Romans no longer refused to meet Hannibal in head on collisions. Rather the Roman army kept a wtxhful eye on Hannibal, but always at the close distance
    </p>
    <p>
    The avoidance strategy worked but it took forever. It took alomost two long decades to drive Hannibal out of Italy. The Roman, adopting a tactic out of Hannibal's playboo, launched an attack against Carthage itself. this forced Hannibal to trvel back to Africa to defend the city. Here he was defeteated at the Battle of Zama.
    </p>
    &nbsp&nbsp
    </div>

    <button onclick="newParagrph()">Click if you want to read about another battle </button>
    </body>
    </html>
    ========
    This is my jscode
    function newParagraph() {

    var element = document.createElement("p");

    var main = document.getElementById("main");

    main.appendChild(element);

    var text = document.createTextNode("The Battle of Salamis was fought between an alliance of Greek cities and the Persian Empire in 480 BC. The Greeks decisively defeated the Persian navy.");

    element.appendChild(text);

    }

    why does it not work when i click the button

  • February 5, 2020 at 17:24
    Permalink

    A short question: any idea why this doesnt work ?

    ====HTML====
    <html>
    <head>
    </head>

    <body style="background-color:#0B2B2C; color:white;" id="body">
    <p>This is the first paragraph of the document</p>
    <p>This is the second one</p>
    <button onclick="createElement()">Create a new paragraph</button>
    </body>
    </html>

    ====JAVASCRIPT====
    function createElement(){
    var elem=document.createElement('p');
    var main=document.getElementById('body');
    main.appendChild(elem);

    var text=document.createTextNode('the code worked');
    elem.appendChild(text);
    }

  • February 5, 2020 at 17:24
    Permalink

    Thanks for the video. You are good at combining real concepts in context of programming. A really rare skill, plus your animated voice is really great. I have a question, when creating a new element a div, how do I apply a style for that div that has just been created? For example, I need to add this styling: #idOfBNewDiv{width: 100px;, height: 200px; z-index: 3; position:absolute;} ……. etc. Thanks.

  • February 5, 2020 at 17:24
    Permalink

    Hi Ej,
    In this code there is no stop.Once you click new paragraph with text appears and after that if you keep on clicking the button same text appear again and again .For example if i hit the button three times the new text adds for three time and it keep on going.There must be some stop point. Please guide.

Leave a Reply