help with innerHtml

**tetrix** · 08-15-2008, 08:17 AM

hello

for example I have this function:

function ChangeTxt(txt) {
document.getElementById('ref').innerHTML = txt;
}

and this code in the body:

<td><a href="#nogo" onClick="ChangeTxt('ref:34<br>available sizes:s-m-l')"></a></td>

if i add the <b> tag to the text that will appear when onclick is executed(ChangeTxt function) the <b> tag is not taken into account, only the <br> tag works, i need also to put <spans> in this text, how can i make so tags are taken into account?

**techno_race** · 08-15-2008, 02:16 PM

Did you forget your </b> and </span>s?

Edit: Please don't start a debate over whether it's <span>s or <spans>.

**tetrix** · 08-15-2008, 04:39 PM

hi here is the example again: i added a span in the text and the function does not work for that onclick:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
function ChangeTxt(txt) {
document.getElementById('ref').innerHTML = txt;
}
</script>

</head>





<body>


<table id="thumbnails">
<tr>
<td><a href="#nogo" onClick="ChangeTxt('oneoneoneone<b>one</b>oneone')">one</a></td>
<td><a href="#nogo" onClick="ChangeTxt('two<span style='color:red'>twotwotwo</span>twotwotwo')">two</a></td>
<td><a href="#nogo" onClick="ChangeTxt('threethreethreethreethree')">three</a></td>
</tr>
</table>



<div id="ref">oneoneoneone<b>one</b>oneone</div>



</body>

</html>

**rangana** · 08-16-2008, 01:49 AM

You need to escape the quotes:

Code:

onClick="ChangeTxt('two<span style=\'color:red\'>twotwotwo</span>twotwotwo')">

**jscheuer1** · 08-16-2008, 08:41 AM

Yes, you must escape any contained delimiters as rangana says, it doesn't hurt to escape closing slashes (/) too, as not doing so can confuse the browser, and will make your code invalid (usually there is no problem, so people often skip this). Also you should return false. If you are using this in several places, the easiest way is to return the function (get rid of the language attribute - it's deprecated):

Code:

<script type="text/javascript">
function ChangeTxt(txt) {
document.getElementById('ref').innerHTML = txt;
return false;
}
</script>

The when you use it (closing slashes escaped, return added):

Code:

<td><a href="#nogo" onclick="return ChangeTxt('oneoneoneone<b>one<\/b>oneone')">one</a></td>
<td><a href="#nogo" onclick="return ChangeTxt('two<span style=\'color:red\'>twotwotwo<\/span>twotwotwo')">two</a></td>
<td><a href="#nogo" onclick="return ChangeTxt('threethreethreethreethree')">three</a></td>

The return is very important because many browsers will still execute the link if the onclick event doesn't return false. Even though your link is to a named anchor, this will still reload the page in many browsers, wiping out any changes that the event made to the document.

**tetrix** · 08-16-2008, 01:58 PM

thanks a lot for the explanations.

**tetrix** · 08-16-2008, 09:04 PM

would it be possible to add something like this inside the function so to create a table?

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
</table>

**Twey** · 08-16-2008, 09:29 PM

Note that innerHTML is non-standard and should be avoided wherever possible.

**jscheuer1** · 08-17-2008, 02:39 AM

Twey is of course correct here. However, many people find it simply easier to use the non-standard, but well supported innerHTML rather than the standard DOM 2 methods for updating content dynamically.

There are pitfalls if one goes the innerHTML route. If you give the browser incomplete tags, it may complete (close) them for you. Then if you later close them with a subsequent innerHTML directive, it can often lead to unexpected errors. Using innerHTML with forms, even when done so 'correctly', can lead to errors and/or unexpected results.

Tables are another area where odd things can happen. However, owing to the vagaries of support in various browsers, sometimes innerHTML is better for tables. But better still is using table's rows and cells collections and methods.

Getting back to your question:

would it be possible to add something like this inside the function so to create a table?

HTML Code:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
</table>

Yes you can do that. The best way (if using innerHTML) is to concatenate the entire desired markup to a variable, and then assign it to the target element's innerHTML. Otherwise you risk some of the pitfalls I mentioned earlier.

Now, I doubt that you really want to create:

HTML Code:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
</table>

because that wouldn't look any different than:

HTML Code:

<br>&nbsp;

So, just what is it that you want to do?

Thread: help with innerHtml

Thread Tools

Search Thread

help with innerHtml

Bookmarks

Bookmarks

Posting Permissions