Add an element to the DOM with JavaScript

by

This should do what you are looking for:

    var newdiv = document.createElement("div");
    newdiv.appendChild(document.createTextNode("some text"));
    document.body.appendChild(newdiv);
<html>
    <head></head>
<body>

</body>
</html>

First, you create the element by document.createElement. To set its text contents, you have to have a “text node” wrapping your text. So, you first create such text node and then add it as (the only) child to your new object.

Then, add your newly created DIV element to the DOM structure. You don’t have to look for the BODY element with getElementsByTagName(), since it exists as a property of document object.

More Related Contents:

  1. How can I change an element’s class with JavaScript?
  2. Is there a spec that the id of elements should be made global variable?
  3. Check if an element contains a class in JavaScript?
  4. Changing CSS Values with Javascript
  5. Chrome extension – retrieving global variable from webpage
  6. innerText vs innerHTML vs label vs text vs textContent vs outerText
  7. Get next / previous element using JavaScript?
  8. Why is the value of my input always empty if I store it in a variable?
  9. What is innerHTML on input elements?
  10. How to convert a DOM node list to an array in Javascript?
  11. JavaScript DOM: Find Element Index In Container
  12. Adding an onclick event to a table row
  13. Is there a DOM event that fires when an HTML select element is closed?
  14. Does the onchange event propagate?
  15. Difference between Element.value and Element.getAttribute(“value”)
  16. Change ‘s option and trigger events with JavaScript
  17. Why is the variable holding the input value always logged as empty?
  18. HTML DOM: Which events do not bubble?
  19. Changing the order of elements
  20. createElement vs. createElementNS
  21. Focus Input Box On Load
  22. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  23. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  24. getElementsByClassName() with two classes
  25. What is the difference between `firstChild` and `firstElementChild`?
  26. How can I get access to a Highcharts chart through a DOM-Container?
  27. How can I remove wrapper (parent element) without removing the child?
  28. Why does
  29. Images failing to load in IE with DOM: 7009 error (unable to decode) in console
  30. Why is iframe.contentWindow == null?

Leave a Comment