Javascript Create Span Using Document createElement

by top54u.com 03 Jul, 2008

Inside DHTML Tutorials | DOM Tutorials | HTML Tutorials | JavaScript Tutorials

Javascript Create New Div HTML Element Dynamically

Javascript Code to Change Div Object innerHTML

Javascript document getElementsByTagName

Create dynamic tables using HtmlControls HtmlTable

Javascript Code to Change Span innerText

What is HTML- what does html stand for

Javascript Code to Change Text Color of HTML elements

Spotlight.....

Javascript DOM createElement method provides the functionality to create the span element at runtime of HTML web page. You can insert the new span tag into the HTML body or any previously created static HTML element in the body of HTML document such as <div> tag or paragraph <p> tag. createElement accepts the parameter as HTML element name e.g. span and creates its Javascript object. You can access the various properties and methods of the dynamically created span tag such as style function and its properties, id property, title property. Also you can alter the innerText or innerHTML of the span tag dynamically. Javascript DOM appendChild method enables you to add the newly created element into the HTML body element or nay other HTML element by accessing it using document.getElementById.

Example of Javascript Create Span Dynamically

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Javascript Create Span</title>

.dynamicSpan {

font-size:11px;
font-family:verdana;
color:Orange;

}

</style>

function createSpan()

{

var spanTag = document.createElement("span");

spanTag.id = "span1";

spanTag.className ="dynamicSpan";

spanTag.innerHTML = "This <b>HTML Span tag</b> is created by using Javascript DOM dynamically.";

document.body.appendChild(spanTag);

}

</script>

</head><

body>

</body>

</html>

Output

This HTML Span tag is created by using Javascript DOM dynamically.

Above example shows the use createElement method of Javascript DOM that provides the functionality to create the span tag dynamically and append the HTML body tag by passing the spanTag object to the appendChild function to insert the new child element.

Spotlight.....

Currently rated 5.0 by 1 people