createElement() and insertBefore() are two JavaScript methods used to add new HTML elements in the web page, these elements are created dynamically in memory and added by JavaScript.

1. createElement()

createElement(tagName) creates in memory an HTML element of the tag specified by tagName.
Syntax:
var new_tag = document.createElement(tagName);
- tagName is the name of the tag that will be created.
- new_tag is the variable that stores the object of the created element.
For example, the code below creates a <h3> tag.
<script type="text/javascript"><!--
var new_h3 = document.createElement('h3');
--></script>

Once this element is created, we can add attributes and content, using "setAttribute()" (or "ClassName" for class) and "innerHTML" for HTML content (can also contains HTML tags).
In the next example is created a <div> tag with class="cls1" and a text content.
<script type="text/javascript"><!--
var new_div = document.createElement('div');
new_div.className = "cls1";
new_div.innerHTML = '<u>WebCourses.net</u>, JS lesson';
--></script>
- This code will create in memory an object that contains the fallowing HTML code:
<div class="cls1"><u>Web Courses.net</u>, JS lesson</div>
- Finally, to attach this <div> element to the HTML document structure, use DOM node method appendChild()
<script type="text/javascript"><!--
document.body.appendChild(new_div);
--></script>
- The <div> element stored in "new_div" is added as the last child in HTML body element.

2. insertBefore()

insertBefore() adds a child node in front of another child, both inside a parent element.
Syntax:
parent.insertBefore(newElm, reference);
- Inserts newElm before reference inside the parent.

Example, creates a <h3> tag and adds it in the Body, before a <div> with id="idiv":
<script type="text/javascript"><!--
function add_h3() {
  // creates a H3 element, class and html content
  var new_h3 = document.createElement('h3');
  new_h3.className = 'cls';
  new_h3.innerHTML = 'The <i>html text</i> content';

  // gets the reference tag
  var reference = document.getElementById('idiv');

  // add 'new_h3' before 'reference', inside body
  document.body.insertBefore(new_h3, reference);
}
--></script>
<div id="idiv">The reference element</div>
<button onclick="add_h3()">Add H3</button>
- Click the button "Add H3" to see the result.
The reference element
- The parent element can be any other HTML tag, but first you have to get an object reference to it, using the syntax:
var parnt = document.getElementById('parent_id');

3. Adding dynamically text-boxes in Form

Here is a practical and useful example of using createElement() and insertBefore() methods to automatically add text boxes in a form.
Explanations are in the script code.
<script type="text/javascript"><!--
// - coursesweb.net/javascript/

// creates an input element and adds it before the Submit button
function add_input() {
  // sets a new input element input, having the attributes: type=text si name=nume[]
  var new_input = document.createElement("input");
  new_input.setAttribute("type", "text");
  new_input.setAttribute("name", "nume[]");
  new_input.style.display = 'block';             // sets cssstyle display:block;

  // sets the objects for reference and parent
  var reper = document.getElementById('submit');
  var parinte = reper.parentNode;

  // Adds new_input
  parinte.insertBefore(new_input, reper);
}
--></script>
<form action="">
  <input type="text" name="nume[]" />
  <input type="submit" value="Submit" id="submit" /><br /><br />
  <input type="button" value="Add box" onclick="add_input()" />
</form>
- When you click on the "Add Box" button, the add_input() function creates and adds a text box.


Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
createElement and insertBefore

Last accessed pages

  1. Display UL bullets and OL numbers on the right side (163)
  2. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (366)
  3. PHP SimpleXML (145)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (3162)
  5. PHP PDO - Introduction and Connecting to Databases (673)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (3567)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (3427)
  3. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (3354)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (3162)
  5. PHP Chat Script (2843)