Search notes:

DOM example: document.createElement

The following example uses document.createElement('div') to dynamically create a <div> HTML tag and insert into the Document Object Model of an HTML document.

After creating it, the new element's innerHTML is then assigned the text to be displayed in the div.

Using the style attribute, some of the elements CSS styles are modified so that the new element stands out more clearly.

The background and color attribute seem to be self-explanotary. Setting the float attribute to left makes sure that the div does not occupy more space than required.

(See Dynamically change a CSS style with javascript)

Finally, the div is placed into the DOM tree inside the <body> tag. The <body> can easily be referenced in JavaScript with document.body.

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>createElement()</title>

<script type="text/JavaScript">

function createElements() {

//
// Dynamically create an element
//
   div_elem = document.createElement('div');

//
// Change the new element's content:
//
   div_elem.innerHTML             = "Created.";

//
// Modify some of the element's styles:
//
   div_elem.style.color           = 'yellow';
   div_elem.style.backgroundColor = '#ff0000';
   div_elem.style.fontWeight      = 'bold';
   div_elem.style.float           = 'left';

//
// Finally add it into the DOM tree
//
   document.body.appendChild(div_elem);

}

</script>
</head>
<body onload='createElements()'>

  <div>This div already was in the html document</div>

</body>
</html>

Github repository about-Document-Object-Model, path: /Node/Document/createElement.html

A browser might render this HTML document like so:

DOM example: document.createElement

See also