Javascript Code to Change Div Object innerHTML

by top54u.com 21 Jun, 2008

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

HTML Div CSS Clear Style

Javascript Code to Change Text Color of HTML elements

Javascript Create New Div HTML Element Dynamically

Javascript Change Div Background Image onclick

Javascript Change Style Class of Div tag

Javascript Append Div Contents

HTML Div CSS Style Float

Spotlight.....

Javascript Code to change div object’s innerHTML is very much similar to the code we did in the previous article Javascript code to change span innerText. Difference between innerText and innerHTML property of getElementById method of Javascript document object is that, innerText does not allow HTML tags inside the string value passed to the innerText property whereas innerHTML property allows to pass the HTML tags such as nested <p> tag, child <div> tag, <span> tag, text formatting tags link <b> bold tag, <strong> tag etc. You can also use inline styles and attribute values in the innerHTML string value passed. But you have to use Javascript string escape characters very precisely to pass the attribute values enclosed in quotation (" ") marks.

To provide all above functionality using Javascript DOM features you have to specify the value for id attribute of div element of HTML so that javascript document object could access the target div element using getElementById method, provided value of id attribute must be unique in the HTML document.

Javascript Syntax to change div innerHTML

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

innerHTML property of getElementById method of DOM document object of Javascript can get and set the innerHTML of specified HTML element whose id is passed to the getElementById method.

Javascript Code to change Div innerHTML

<html>

<head>

<title>Javascript Change Background Color Style</title>

function changeDivHTML()

{

var previousInnerHTML = new String();

previousInnerHTML = document.getElementById('div1').innerHTML;

previousInnerHTML = previousInnerHTML.concat("<h1>New HTML Text added to the div HTML tag.</h1>");

previousInnerHTML = previousInnerHTML.concat("<p align=\"center\">Paragraph child HTML element added<br /> to the div tag dynamically.</p>");

previousInnerHTML = previousInnerHTML.concat("<span style=\"color:#ff0000\">Span child HTML element added to the div tag dynamically.</span>");

document.getElementById('div1').innerHTML = previousInnerHTML;

}

</script>

</head>

<body>

<b>innerHTML</b> placed inside the <b>div</b> element of HTML.<br />

Javascript will change the innerHTML of this HTML div element.

</div>

</body>

</html>

Note: Above example also shows how to code for attributes inside the string that is passed to the Javascript innerHTML property of HTML element. String Escape character backslash \ is used to concat the inline quotation marks to enclose the attribute values.

Similarly you can change the innerHTML of <span> and paragraph <p> element of HTML dynamically using Javascript DOM.

Spotlight.....

Be the first to rate this post