Using the DOM to write to page / label / div

**danjojo** · Jun 4, 2007, 05:36

function ConjunctionJunction(){
var strInputSize = document.getElementById("inputSize").value;
strInputSize = strInputSize * 0.03937 + " inches";

var writeIt = document.getElementById("WriteCalculation");
writeIt.innerHTML = (strInputSize);

}

How do I write to a div or label or just plain text?

The Div id="WriteCalculation area I have set asid for this function, only briefly displays the calculated result, but then it disappears.

How do I get it to stay permanently?

I am realizing after some preliminary research that innerHTML is not officially part of any W3C DOM specification, is that true?

However, the case has been made that innerHTML is lightning fast compared to the DOM. http://www.quirksmode.org/dom/innerhtml.html

**mrhoo** · Jun 4, 2007, 06:07

var writeIt = document.getElementById("WriteCalculation");

using the dom, if writeIt is an input element or textarea
writeIt.value= strInputSize;
for any other element-
writeIt.appendChild(document.createTextNode(strInputSize))

Or use replaceChild or insertBefore to locate the string somewhere else in the
writeIt element

**danjojo** · Jun 4, 2007, 06:21

Ok, things I was trying previously were also working. Your help provided, also worked but only PRE-SUBMIT.

I believe now my real design-flaw is that I am using a submit button event to call the JavaScript function, and so it places the correct content in my div, but then obediently reloads the page!!

The disadvantage to using Button Events, is that the Enter key on the keyboard will not trigger them.

Full code for clarity:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html>
<head>
<link href="ajaxExample.css" rel="stylesheet" type="text/css">

<title>Modern DHTML = DOM Scripting & Ajax working together</title>
<script type="text/javascript">
var message = "<br/> <input type='checkbox' checked> <font color='red'><strong>Arrival at JavaScript -- Initiate the XmlHttpRequestObject</strong></font><br/><br/>";
document.write(message.toUpperCase());
var XMLHttpRequestObject = 0; // default to false boolean value
document.write("<input type='checkbox' checked> <font color='red'>By default XMLHttpRequestObject is set to False -- Get a Response from the browser the the XMLHttpRequestObject is set.</font><br/><br/>");

if (window.XMLHttpRequest) { // Mozilla, Safari, Truthy test ...
XMLHttpRequestObject = new XMLHttpRequest();
if (XMLHttpRequestObject.overrideMimeType) {
XMLHttpRequestObject.overrideMimeType('text/xml');
}
} else if(window.ActiveXObject) { // Truthy test for pre Internet Explorer 7 browsers
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

if (XMLHttpRequestObject) { // test for the object
document.write("<input type='checkbox' checked> <font color='red'>Response Received -- Congrats, the XMLHttpRequestObject object is available in your browser, you can use AJAX!</font><br/><br/>");
} else {
document.write("Your in a browser that is outdated and cannot run this web application");
}

function ConjunctionJunction(){
var strInputSize = document.getElementById("inputSize").value;
strInputSize = strInputSize * 0.03937 + " inches";

var writeToElement = document.getElementById("WriteCalculation"); // div
// innerHTML sets or gets all of the markup and content within a given element
writeToElement.appendChild(document.createTextNode(strInputSize));
}

</script>
</head>
<body>
<div id="containMe" style="background: white; border: 1px solid black; margin: 5px; padding: 3px;">
<h1>Modern DHTML = DOM Scripting & Ajax working together</h1>
<br/>
<div style="border: 2px solid #44A143; padding: 7px; width: 730px;">
<form onSubmit="ConjunctionJunction();">
Enter Size in milimeters <input type="text" bgcolor="yellow" id="inputSize"> <label id="inchesLabel" style="font-weight: bold;">22 milimeters = 1/4 inch.</label><br/>
<br/>
<input class="red" type="submit" value="Function Juntion">
</form>
</div>
</div>
<div id="WriteCalculation" style="background: white; border: 1px solid black; margin: 5px; padding: 3px;">
</div>
</body>
</html>

**danjojo** · Jun 4, 2007, 10:12

Because I like to be fair and balanced: Here is a link to innerHTML Gotcha's: http://www.ajaxian.com/archives/innerhtml-gotchas

I can see the value in learning to do the verbose way that is the W3C DOM way.

innerHTML is just fast and simple.

The SitePoint Forums have moved.

User Tag List

Thread: Using the DOM to write to page / label / div

Thread Tools

Display

Using the DOM to write to page / label / div

Bookmarks

Bookmarks

Posting Permissions