Javascript Course


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.


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 <div> tag, and adds to it a class attribute and content.
var elm = document.createElement('div');
elm.setAttribute('class', 'o_clasa')
elm.innerHTML ='Text in div tag';
console.log(elm);
- This code will create in memory an object that contains the fallowing HTML code:
<div class='o_clasa'>Text in div tag</div></div>

- To add this element in the HTML document structure, you can use the appendChild() method.
In this example, the 'div' element stored in 'elm' is added as the last child in HTML body.
var elm = document.createElement('div');
elm.setAttribute('class', 'o_clasa')
elm.innerHTML ='Div created with createElement(), and added with appendChild()';
document.body.appendChild(elm);

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 before a <div> with id='rpr':
<h4>Example with insertBefore()</h4>
<p>If you click the button, it adds a H3 tag created with createElement(), before a DIV with id='rpr'.</p>
<button id='btn1'>Add H3</button>
<div id='rpr'>#rpr, reper.</div>

<script>
function add_h3(){
 // creates a H3 element, class and html content
 var elm = document.createElement('h3');
 elm.className ='o_clasa';
 elm.innerHTML = 'The <b>html text</b> content';

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

 //adds the new element before reper (in parent body)
 document.body.insertBefore(elm, reper);
}

document.getElementById('btn1').addEventListener('click', add_h3);
</script>

Adding dynamically input fields in Form

Here is a practical and useful example of using createElement() and insertBefore() methods to automatically add text fields in a form.
Explanations are in the script code.
<h4>Example adding with insertBefore() input fields in form</h4>
<p>When you click on the 'Add Box' button, the add_input() function creates and adds a text field in form.</p>

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

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

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

 // Adds elm
 parinte.insertBefore(elm, reper);
}
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
createElement and insertBefore

Last accessed pages

  1. Using v-model in form input fields (1051)
  2. jQuery UI draggable - Drag elements (11445)
  3. Display data from PHP Array, or MySQL in HTML table (26980)
  4. Redirects (4978)
  5. jsSHA - SHA Hashes and HMAC in JavaScript (3519)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (310)
  2. The Mastery of Love (48)
  3. CSS cursor property - Custom Cursors (36)
  4. Read Excel file data in PHP - PhpExcelReader (35)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (31)