Reusable add/del element functions w/insertAfter JavaScript
Posted: Mon Sep 22, 2008 9:46 am
Most of what I have to say about this is on my blog here...
http://www.jabcreations.com/blog/reusab ... nsertafter
Essentially the element_add function requires an existing ID as a reference and then requires a relative position: after, before, or inside. The after bit was what the internet was sorely lacking.
You can test drive the page here...
http://www.jabcreations.com/web/javascript/elements.php
Here is the source code as posted on my blog. Your thoughts are welcomed.
http://www.jabcreations.com/blog/reusab ... nsertafter
Essentially the element_add function requires an existing ID as a reference and then requires a relative position: after, before, or inside. The after bit was what the internet was sorely lacking.
You can test drive the page here...
http://www.jabcreations.com/web/javascript/elements.php
Here is the source code as posted on my blog. Your thoughts are welcomed.
Code: Select all
<?php
$mime = (stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")) ? "application/xhtml+xml" : "text/html";
header("content-type:$mime;charset=$charset");
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Reusable create, delete, and toggle element functions</title>
<script type="text/javascript">
//<![CDATA[
// Create Element by ID
function element_add(new_position, this_node, new_element, new_element_id, new_element_class, new_element_text)
{
var element_new = document.createElement(new_element);
if (!document.getElementById(new_element_id)) {element_new.setAttribute('id', new_element_id);} else {alert('ERROR! An element with the id of \'' + new_element_id + '\' already exists!'); return;}
if (new_element_class != undefined) {element_new.setAttribute('class', new_element_class);}
if (new_element_text != undefined) {var element_new_content = document.createTextNode(new_element_text); element_new.appendChild(element_new_content);}
// Add element AFTER ID.
if (new_position == 'after')
{
this_node = document.getElementById(this_node);
if (this_node.nextSibling) {this_node.parentNode.insertBefore(element_new, this_node.nextSibling);}
else {this_node.parentNode.appendChild(element_new);}
}
// Add element BEFORE ID.
else if (new_position == 'before')
{
document.getElementById(this_node).parentNode.insertBefore(element_new, document.getElementById(this_node));
}
// Add element INSIDE ID.
else if (new_position == 'inside')
{
document.getElementById(this_node).appendChild(element_new);
}
else {alert('ERROR: Third parameter must be \'after\', \'before\', or \'inside\'.');}
}
// Delete Element by ID
function element_del(element_id)
{
if (document.getElementById(element_id))
{
document.getElementById(element_id).parentNode.removeChild(document.getElementById(element_id));
}
else
{
alert('ERROR: No element with the id \'' + element_id + '\' exists!');
}
}
// Toggle element by ID, call function just like you call element_add with parameters!
function element_tog(new_position, this_node, new_element, new_element_id, new_element_class, new_element_text)
{
if (!document.getElementById(new_element_id)) {javascript:element_add(new_position, this_node, new_element, new_element_id, new_element_class, new_element_text);}
else if (document.getElementById(new_element_id)) {element_del(new_element_id);}
}
//]]>
</script>
<style type="text/css">
#content {float: right; width: 64%;}
#content div {border: #000 dotted 1px; clear: both; margin: 2px; padding: 2px;}
#content div.css_class_after {background-color: #ffc; margin: 2px 2px 2px 60px;}
#content div.css_class_before {background-color: #fcf; float: left; margin: 2px;}
#content div.css_class_inside {background-color: #cff; margin: 10px;}
#menu_add {float: left; width: 12%;}
#menu_del {float: left; width: 12%;}
#menu_tog {float: right; width: 12%;}
h1, h2 {font-size: 17px; margin: 2px;}
</style>
</head>
<body>
<h1 id="head1">JavaScript reusable element add and delete functions example page by <a href="http://www.jabcreations.com/blog/reusable-element-add-and-delete-functions-with-insertafter">John A. Bilicki III</a></h1>
<div>
<p>The three reusable functions <em>element_add</em>, <em>element_del</em>, and <em>element_tog</em> on this page will allow you to easily add elements, delete elements, and toggle between adding and deleting them.
  The main benefit is that the <em>element_add</em> function allows you to add an element after, before, or inside of a reference element.</p>
<p>The <em>element_add</em> function's first parameter let's you choose to create the new element after, before, or inside of the reference element which is the second parameter and must already exist.
  The third parameter is the element such as a div or a span.
  The fourth parameter is the id, the fifth an optional class, and the sixth optional text (which in the <abbr title="Document Object Modle">DOM</abbr> is referenced as <em>nodeValue</em>.
  You can access/alert a nodevalue in this <a href="javascript:alert(document.getElementById('head1').firstChild.nodeValue);" tabindex="1">example</a> which will alert the nodeValue of the primary header element on this page).</p>
<p>The <em>element_add</em> function only requires the id of the element you wish to delete.
  The <em>element_tog</em> however requires all the parameters you want to pass to the <em>element_add</em>.</p>
<p>The functions will work in Internet Explorer 5.5 but not 5.0 however the class attribute if set is not applied except in Internet Explorer 8.0 and higher.
  Gecko 1.0+ works, classes are applied on at least Gecko 1.6+.
  The functions and class attributes also work in Opera 7 and Safari 3.</p>
</div>
<div id="content">
<div id="el1">element 1</div>
<div id="el2">element 2</div>
<div id="el3">element 3</div>
<div id="el4">element 4</div>
<div id="el5">element 5</div>
<div id="el6">element 6</div>
<div id="el7">element 7</div>
<div id="el8">element 8</div>
</div><!-- /#content -->
<div id="menu_add">
<h2>Create Elements</h2>
<div><a href="javascript:element_add('after','el1','div','example_id_a1','css_class_after','New element after el1.');" tabindex="1">After element 1</a></div>
<div><a href="javascript:element_add('after','el2','div','example_id_a2','css_class_after','New element after el2.');" tabindex="1">After element 2</a></div>
<div><a href="javascript:element_add('after','el3','div','example_id_a3','css_class_after','New element after el3.');" tabindex="1">After element 3</a></div>
<div><a href="javascript:element_add('after','el4','div','example_id_a4','css_class_after','New element after el4.');" tabindex="1">After element 4</a></div>
<div><a href="javascript:element_add('after','el5','div','example_id_a5','css_class_after','New element after el5.');" tabindex="1">After element 5</a></div>
<div><a href="javascript:element_add('after','el6','div','example_id_a6','css_class_after','New element after el6.');" tabindex="1">After element 6</a></div>
<div><a href="javascript:element_add('after','el7','div','example_id_a7','css_class_after','New element after el7.');" tabindex="1">After element 7</a></div>
<div><a href="javascript:element_add('after','el8','div','example_id_a8','css_class_after','New element after el8.');" tabindex="1">After element 8</a></div>
<div><a href="javascript:element_add('before','el1','div','example_id_b1','css_class_before','New element before el1.');" tabindex="1">Before element 1</a></div>
<div><a href="javascript:element_add('before','el2','div','example_id_b2','css_class_before','New element before el2.');" tabindex="1">Before element 2</a></div>
<div><a href="javascript:element_add('before','el3','div','example_id_b3','css_class_before','New element before el3.');" tabindex="1">Before element 3</a></div>
<div><a href="javascript:element_add('before','el4','div','example_id_b4','css_class_before','New element before el4.');" tabindex="1">Before element 4</a></div>
<div><a href="javascript:element_add('before','el5','div','example_id_b5','css_class_before','New element before el5.');" tabindex="1">Before element 5</a></div>
<div><a href="javascript:element_add('before','el6','div','example_id_b6','css_class_before','New element before el6.');" tabindex="1">Before element 6</a></div>
<div><a href="javascript:element_add('before','el7','div','example_id_b7','css_class_before','New element before el7.');" tabindex="1">Before element 7</a></div>
<div><a href="javascript:element_add('before','el8','div','example_id_b8','css_class_before','New element before el8.');" tabindex="1">Before element 8</a></div>
<div><a href="javascript:element_add('inside','el1','div','example_id_i1','css_class_inside','New element inside el1.');" tabindex="1">Inside element 1</a></div>
<div><a href="javascript:element_add('inside','el2','div','example_id_i2','css_class_inside','New element inside el2.');" tabindex="1">Inside element 2</a></div>
<div><a href="javascript:element_add('inside','el3','div','example_id_i3','css_class_inside','New element inside el3.');" tabindex="1">Inside element 3</a></div>
<div><a href="javascript:element_add('inside','el4','div','example_id_i4','css_class_inside','New element inside el4.');" tabindex="1">Inside element 4</a></div>
<div><a href="javascript:element_add('inside','el5','div','example_id_i5','css_class_inside','New element inside el5.');" tabindex="1">Inside element 5</a></div>
<div><a href="javascript:element_add('inside','el6','div','example_id_i6','css_class_inside','New element inside el6.');" tabindex="1">Inside element 6</a></div>
<div><a href="javascript:element_add('inside','el7','div','example_id_i7','css_class_inside','New element inside el7.');" tabindex="1">Inside element 7</a></div>
<div><a href="javascript:element_add('inside','el8','div','example_id_i8','css_class_inside','New element inside el8.');" tabindex="1">Inside element 8</a></div>
</div><!-- /#menu_add -->
<div id="menu_del">
<h2>Delete Elements</h2>
<div><a href="javascript:element_del('example_id_a1');" tabindex="1">After element 1</a></div>
<div><a href="javascript:element_del('example_id_a2');" tabindex="1">After element 2</a></div>
<div><a href="javascript:element_del('example_id_a3');" tabindex="1">After element 3</a></div>
<div><a href="javascript:element_del('example_id_a4');" tabindex="1">After element 4</a></div>
<div><a href="javascript:element_del('example_id_a5');" tabindex="1">After element 5</a></div>
<div><a href="javascript:element_del('example_id_a6');" tabindex="1">After element 6</a></div>
<div><a href="javascript:element_del('example_id_a7');" tabindex="1">After element 7</a></div>
<div><a href="javascript:element_del('example_id_a8');" tabindex="1">After element 8</a></div>
<div><a href="javascript:element_del('example_id_b1');" tabindex="1">Before element 1</a></div>
<div><a href="javascript:element_del('example_id_b2');" tabindex="1">Before element 2</a></div>
<div><a href="javascript:element_del('example_id_b3');" tabindex="1">Before element 3</a></div>
<div><a href="javascript:element_del('example_id_b4');" tabindex="1">Before element 4</a></div>
<div><a href="javascript:element_del('example_id_b5');" tabindex="1">Before element 5</a></div>
<div><a href="javascript:element_del('example_id_b6');" tabindex="1">Before element 6</a></div>
<div><a href="javascript:element_del('example_id_b7');" tabindex="1">Before element 7</a></div>
<div><a href="javascript:element_del('example_id_b8');" tabindex="1">Before element 8</a></div>
<div><a href="javascript:element_del('example_id_i1');" tabindex="1">Inside element 1</a></div>
<div><a href="javascript:element_del('example_id_i2');" tabindex="1">Inside element 2</a></div>
<div><a href="javascript:element_del('example_id_i3');" tabindex="1">Inside element 3</a></div>
<div><a href="javascript:element_del('example_id_i4');" tabindex="1">Inside element 4</a></div>
<div><a href="javascript:element_del('example_id_i5');" tabindex="1">Inside element 5</a></div>
<div><a href="javascript:element_del('example_id_i6');" tabindex="1">Inside element 6</a></div>
<div><a href="javascript:element_del('example_id_i7');" tabindex="1">Inside element 7</a></div>
<div><a href="javascript:element_del('example_id_i8');" tabindex="1">Inside element 8</a></div>
</div><!-- /#menu_del -->
<div id="menu_tog">
<h2>Toggle Elements</h2>
<div><a href="javascript:element_tog('after','el1','div','example_id_a1','css_class_after','New element after el1.');" tabindex="1">After element 1</a></div>
<div><a href="javascript:element_tog('after','el2','div','example_id_a2','css_class_after','New element after el2.');" tabindex="1">After element 2</a></div>
<div><a href="javascript:element_tog('after','el3','div','example_id_a3','css_class_after','New element after el3.');" tabindex="1">After element 3</a></div>
<div><a href="javascript:element_tog('after','el4','div','example_id_a4','css_class_after','New element after el4.');" tabindex="1">After element 4</a></div>
<div><a href="javascript:element_tog('after','el5','div','example_id_a5','css_class_after','New element after el5.');" tabindex="1">After element 5</a></div>
<div><a href="javascript:element_tog('after','el6','div','example_id_a6','css_class_after','New element after el6.');" tabindex="1">After element 6</a></div>
<div><a href="javascript:element_tog('after','el7','div','example_id_a7','css_class_after','New element after el7.');" tabindex="1">After element 7</a></div>
<div><a href="javascript:element_tog('after','el8','div','example_id_a8','css_class_after','New element after el8.');" tabindex="1">After element 8</a></div>
<div><a href="javascript:element_tog('before','el1','div','example_id_b1','css_class_before','New element before el1.');" tabindex="1">Before element 1</a></div>
<div><a href="javascript:element_tog('before','el2','div','example_id_b2','css_class_before','New element before el2.');" tabindex="1">Before element 2</a></div>
<div><a href="javascript:element_tog('before','el3','div','example_id_b3','css_class_before','New element before el3.');" tabindex="1">Before element 3</a></div>
<div><a href="javascript:element_tog('before','el4','div','example_id_b4','css_class_before','New element before el4.');" tabindex="1">Before element 4</a></div>
<div><a href="javascript:element_tog('before','el5','div','example_id_b5','css_class_before','New element before el5.');" tabindex="1">Before element 5</a></div>
<div><a href="javascript:element_tog('before','el6','div','example_id_b6','css_class_before','New element before el6.');" tabindex="1">Before element 6</a></div>
<div><a href="javascript:element_tog('before','el7','div','example_id_b7','css_class_before','New element before el7.');" tabindex="1">Before element 7</a></div>
<div><a href="javascript:element_tog('before','el8','div','example_id_b8','css_class_before','New element before el8.');" tabindex="1">Before element 8</a></div>
<div><a href="javascript:element_tog('inside','el1','div','example_id_i1','css_class_inside','New element inside el1.');" tabindex="1">Inside element 1</a></div>
<div><a href="javascript:element_tog('inside','el2','div','example_id_i2','css_class_inside','New element inside el2.');" tabindex="1">Inside element 2</a></div>
<div><a href="javascript:element_tog('inside','el3','div','example_id_i3','css_class_inside','New element inside el3.');" tabindex="1">Inside element 3</a></div>
<div><a href="javascript:element_tog('inside','el4','div','example_id_i4','css_class_inside','New element inside el4.');" tabindex="1">Inside element 4</a></div>
<div><a href="javascript:element_tog('inside','el5','div','example_id_i5','css_class_inside','New element inside el5.');" tabindex="1">Inside element 5</a></div>
<div><a href="javascript:element_tog('inside','el6','div','example_id_i6','css_class_inside','New element inside el6.');" tabindex="1">Inside element 6</a></div>
<div><a href="javascript:element_tog('inside','el7','div','example_id_i7','css_class_inside','New element inside el7.');" tabindex="1">Inside element 7</a></div>
<div><a href="javascript:element_tog('inside','el8','div','example_id_i8','css_class_inside','New element inside el8.');" tabindex="1">Inside element 8</a></div>
</div><!-- /#menu_tog -->
</body>
</html>