Javascript Code to Change Span innerText

by top54u.com 21 Jun, 2008

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

Javascript Code to Change Div Object innerHTML

Javascript Code to Change Text Color of HTML elements

HTML Code to Change Heading Font Size and Color

Javascript Create Span Using Document createElement

Javascript Create New Div HTML Element Dynamically

Javascript Change Link Text Color onmouseover

Javascript Change Div Background Image onclick

Spotlight.....

Javascript document object can change the innerText property of the HTML elements like span, div, and paragraph etc using getElementById method. You can change the old innerText of the HTML span element or you can use the Javascript string concat function to concatenate the old text and new text into the span <span> tag. String concat function of javascript allows you to insert the new innerText in the beginning or at the ending of the previous text placed inside the <span> tag.

The innerText property of HTML elements such as <span>, <div> or <p> paragraph tag does not allow passing the HTML tags in the string value. Instead you can use "\n" backslash n in the string value as a newline character.

Here you have to specify the value of id attribute of <span> tag to access it using the getElementById method of document object. Value of id attribute must be unique in the current HTML document coz getElementById method returns reference to the first occurrence of HTML element with specified id.

Syntax to Change Span innerText

document. getElementById("id") . innerText = "value";

innerText property of getElementById method gets or sets the value of innerText property value of the target HTML element.

Javascript Code to change Span innerText

<html>

<head>

<title>Javascript Change Span innerText</title>

function changeSpanText()

{

var previousInnerText = new String(); previousInnerText = document.getElementById('span1').innerText; previousInnerText = previousInnerText.concat("\nNew Text added to the span HTML tag.\n"); document.getElementById('span1').innerText = previousInnerText;

}

</script>

</head>

<body>

innerText placed inside the span element of HTML.<br />

Javascript will change the innerText of this HTML span element.

</span>