Script Title: addElement
Programming Language: Java Script
Date Completed: 2012/11/19

Purpose: To dynamically create and place a Web page element in a Web page.

Description: Dynamically create and place an HTML element in a Web page. Creates a new HTML element, place the element above, below, within an element or inline placement. Inline placement allows the new element to be created where the script is executed.

Compatibility: Works with all modern Web browsers, some legacy support.

Methods:

var class = new addElement();

class.element;Set the type of HTML Element, default value DIV
class.type;Set the type property
class.src;Set the src property
class.id;Set the element’s ID, default value null
class.className;Set the element’s Class name, default value null
class.cssText;Set the element’s inline CSS, default value null
class.innerHTML;Set the element’s inner HTML, default value null
class.parentID;Set the target parent element by ID, default value null
class.nodePosition;Set the position to create the element, default value 0

class.create();Function to create the new element

Node Positions:

0 / NullAdd the element inline or within a targeted element
1Add element below a targeted element
2Add element above a targeted element
3Add the element within the HTML Document Head
4Add the element to the bottom of the HTML Document Body

Note: Node position 4, the new element can only be placed on the bottom of the HTML Body if the DOM document has completed loading. This means that the new element cannot be placed on the bottom of the HTML Body if it hasn’t rendered yet. If the HTML Body has not rendered yet, the element will be created as inline.

Example Usage 1:

Create a DIV

var newDiv = new addElement();
newDiv.element = “div”;
newDiv.id = “mynudiv”;
newDiv.classText = “width: 350px; height: 250px; border: 5px solid red;”;
newDiv.innerHTML = “Hello my name is Sam.”;
newDiv.create();

Note: if element is not defined the default is div.

Example Usage 2:

Create IMG

var newImg = new addElement();
newImg.id = “mynuimg”;
newImg.src = “myimg.jpg”;
newImg.classText = “width: 350px; height: 250px; border: 5px solid red;”;
newImg.create();

Example Usage 3:

Create External Style Sheet File

var newCss = new addElement();
newCss.element = “style”;
newCss.src = “mycss.css”;
newCss.type = “text/css”;
newCss.nodePosition = 3;
newCss.create();

Note: if the src is defined the element will automatically be set as a link element.

Example Usage 3 Alternative:

var newCss = new addElement();
newCss.element = “style”;
newCss.src = “mycss.css”;
newCss.nodePosition = 3;
newCss.create();

Example Usage 4:

Create inline Style Sheet

var newCss = new addElement();
newCss.element = “style”;
newCss.type = “text/css”;
newCss.innerHTML = “.myclass {color: red;} #myid {color: blue;}”;
newCss.nodePosition = 3;
newCss.create();

Note: if the type is not defined the, a style element is automatically set as text/css.

Example Usage 5:

Create External Java Script File

var newJs = new addElement();
newJs.element = “script”;
newJs.src = “myjs.js”;
newJs.type = “text/javascript”;
newJs.nodePosition = 4;
newJs.create();

Note: if the type of a script element is not defined, the default is automatically set as text/javascript.

 

 

 

Be the first to write a comment.

---