w3mentor
Learning web technologies simplified!
 
Home / Javascript / Archive by category 'Javascript & DOM'

Javascript & DOM

Detect the browser version in Javascript

<HTML>
<HEAD>
<TITLE>Browser Detecti on</TITLE>
</HEAD>
<body>
<SCRIPT LANGUAGE="JavaScript">
var browsername= navigator.appName
var browserversion = navigator.appVersion
if (browsername == "Microsoft Internet Explorer" )
{ 
document. write(" You are using MS Internet Explorer version " +
browserversion)
}
else
{ 
document. write(" You are using Netscape Navigator version " +
browserversion)
}
</SCRIPT>
</BODY>
</HTML>

Get the highest z-index in a page using javascript

Use the following javascript function to get the biggest ZIndex in a page if you need to add an element above all others.

<script>
function zin(){
var allElements = document.getElementsByTagName('*'); 
var vaval=0
var vaz=0
for (var i = 0; i< allElements.length; i++){
if(navigator.appName.substring(0,5)=="Micro" && allElements[i].parentNode==document.documentElement.childNodes[1]){
vaz=allElements[i].currentStyle='zIndex'
}
if(navigator.appName.substring(0,5)!="Micro" && allElements[i].parentNode==document.documentElement.childNodes[1]){
vaz=getComputedStyle(allElements[i],null).getPropertyValue('z-index');
}
if(vaz>vaval){
vaval=vaz
}
}
alert(vaval)
}
</script>

Maintaining the position of an element using Javascript DOM

<script language="JavaScript"
type="text/JavaScript">
function positionNavigation() {
var nav = document.getElementById("navigation");
var x, y;
var navwidth = 155;
if (window.innerWidth) {
x = window.innerWidth + window.pageXOffset – navwidth;
y = window.pageYOffset + 10;
} else {
with (document.body) {
x = clientWidth + scrollLeft - navwidth;
y = scrollTop + 10;
}
}
nav.style.left = x + "px";
nav.style.posLeft = x;
nav.style.top = y + "px";
nav.style.posTop = y;
}
window.onload = positionNavigation;
window.onscroll = positionNavigation;
</script>
<h1>My Portal</h1>
<div id="navigation" style="position: absolute;
background-color: #eee; border: 1px solid">
<a href="http://www.w3mentor.com/">w3mentor
</a><br />
<a href="http://google.com">Google</a><br />
</div>

Animate a DOM element using Javascript

The following code runs the banner and stops after 50 iterations.

<script language="JavaScript"
type="text/JavaScript">
var nr = 0;
var id = null;
function animate() {
nr++;
if (nr > 50) {
window.clearInterval(id);
document.getElementById("element").style
➥.visibility = "hidden";
} else {
var el = document.getElementById("element");
el.style.left =
(myParseInt(el.style.left) + 5) + "px";
el.style.posLeft += 5;
el.style.top =
(myParseInt(el.style.top) + 5) + "px";
el.style.posTop += 5;
}
}
window.onload = function() {
id = window.setInterval("animate();", 100);
};
</script>
<h1>w3mentor.com</h1>
<div id="element" style="position: absolute; background-color: #eee; border: 1px solid">
JavaScript Examples
</div>

Positioning an element using Javascript DOM

<script language="JavaScript" type="text/JavaScript">
function position() {
var el = document.getElementById("element");
el.style.left = "0px";
el.style.posLeft = 0;
el.style.top = "0px";
el.style.posTop = 0;
}
window.onload = position;
</script>
<h1>w3mentor</h1>
<p>Some sample text. Some sample text.
Some sample text. Some sample text.
Some sample text. Some sample text.
Some sample text. Some sample text.
Some sample text. Some sample text.
Some sample text. Some sample text. </p>
<div id="element" style="position: absolute;background-color: #eee; border: 1px solid">
JavaScript Examples
</div>

Adding DOM elements via innerHTML in Javascript

<script language="JavaScript"
type="text/JavaScript">
var nr = 1;
function addItem() {
var list = document.getElementById("list");
nr++;
var newNode = "<li>Item " + nr + "</li>";
list.innerHTML += newNode;
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();"
value="Add item" />

Create a table dynamically using Javascript

<script language="JavaScript"
type="text/JavaScript">
function createTable(data) {
var table = document.createElement("table");
var thead = document.createElement("thead");
var tr = document.createElement("tr");
for (var i = 0; i < data[0].length; i++) {
var th = document.createElement("th");
var newText =
document.createTextNode(data[0][i]);
th.appendChild(newText);
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
var tbody = document.createElement("tbody");
for (var i = 1; i < data.length; i++) {
var tr = document.createElement("tr");
for (var j=0; j < data[i].length; j++) {
var td = document.createElement("td");
var newText =
document.createTextNode(data[i][j]);
td.appendChild(newText);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
return table;
}
window.onload = function() {
var table = createTable([
["1", "2", "3", "4", "5"],
["one", "two", "three", "four", "five"]]);
document.body.appendChild(table);
}
</script>

Creating a list in DOM using Javascript

<script language="JavaScript"
type="text/JavaScript">
function createList(data) {
var list = document.createElement("ul");
for (var i = 0; i < data.length; i++) {
var newItem = document.createElement("li");
var newText = document.createTextNode(data[i]);
newItem.appendChild(newText);
list.appendChild(newItem);
}
return list;
}
window.onload = function() {
var list = createList(
["one", "two", "three", "four", "five"]);
document.body.appendChild(list);
}
</script>

Replace DOM nodes using Javascript

<script language="JavaScript"
type="text/JavaScript">
var nr = 1;
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
nr++;
var newTextNode =
document.createTextNode("Item " + nr);
newNode.appendChild(newTextNode);
list.replaceChild(newNode, list.firstChild);
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();"
value="Replace item" />

Clone nodes using Javascript

<script language="JavaScript" type="text/JavaScript">
var nr = 1;
function addItem(cloneMode) {
var list = document.getElementById("list");
var oldItem = list.firstChild;
var newItem = oldItem.cloneNode(cloneMode);
list.appendChild(newItem);
}
</script>
<ul id="list"><li><a href="http://www.w3mentor.com/">
Item 1</a></li></ul>
<input type="button" onclick="addItem(true);"
value="Clone all" />
<input type="button" onclick="addItem(false);"
value="Clone node only" />

Setting attributes using Javascript

<script language="JavaScript" type="text/JavaScript">
var nr = 1;
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
var newLink = document.createElement("a");
newLink.setAttribute("href","http://www.w3mentor.com/");
nr++;
var newTextNode =
document.createTextNode("Item " + nr);
newLink.appendChild(newTextNode);
newNode.appendChild(newLink);
list.appendChild(newNode);
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();"
value="Add item" />

Creating and adding a text node to DOM using Javascript

<script language="JavaScript"
type="text/JavaScript">
var nr = 1;
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
nr++;
var newTextNode =
document.createTextNode("Item " + nr);
newNode.appendChild(newTextNode);
list.appendChild(newNode);
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();"
value="Add item" />

Adding nodes to the top of the list of DOM children using Javascript

<script language="JavaScript"
type="text/JavaScript">
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
list.insertBefore(newNode, list.firstChild);
}
</script>
<ul id="list"><li>Item</li></ul>
<input type="button" onclick=vaddItem();"
value="Add item" />

Adding nodes to DOM using Javascript

<script language="JavaScript"
type="text/JavaScript">
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
list.appendChild(newNode);
}
</script>
<ul id="list"><li>Item</li></ul>
<input type="button" onclick="addItem();"
value="Add item" />

Remove nodes from DOM Document using Javascript

<script language="JavaScript"
type="text/JavaScript">
function removeItem() {
var list = document.getElementById("list");
if (list.childNodes.length > 0) {
list.removeChild(list.lastChild);
}
}
</script>
<ol id="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
<input type="button" onclick="removeItem();"
value="Remove item" />

Retrieving information from node using Javascript

<script language="JavaScript" type="text/JavaScript">
window.onload = function() {
var s = "";
with (document.getElementById("para")) {
for (var i=0; i<childNodes.length; i++) {
with (childNodes[i]) {
s += nodeName + ": " + nodeValue + " (" + nodeType + ")\n";
}
}
}
window.alert(s);
}
</script>
<p id="para"><em>JavaScript</em> Examples</p>

Accessing elements by tag name using Javascript

<script language="JavaScript"
type="text/JavaScript">
window.onload = function() {
window.alert(
document.getElementsByTagName("p") +
" (" + document.getElementsByTagName("p").length
+ " elements)");
}
</script>
<p>JavaScript Examples</p>
<p>W3mentor</p>

Access an element by its ID using Javascript

<script language="JavaScript"
type="text/JavaScript">
window.onload = function() {
window.alert(document.getElementById("para"));
}
</script>
<p id="para">JavaScript Examples</p>

Latest Tutorials & Code Snippets

Reference Guides