D4mations.com

JavaScript Tutorial for Beginners – 36 – Creating a new element



In this video we will create a new element.

Javascript code: http://pastebin.com/jnzfkBs8
HTML code: http://pastebin.com/JAfDWmCQ
CSS Code: http://pastebin.com/Nb208UTf

Original source

d4mer

, , , , , , , , ,

28 responses to “JavaScript Tutorial for Beginners – 36 – Creating a new element”

  10. 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?

  12. 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");

  13. 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>

  14. 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>

  22. 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

  25. 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);
    }

  26. 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.

  28. 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