[RESOLVED] Nested quotes with html and javascript
Hi,
I'm trying to work out how to use nested quotes.
The first link works, but the second fails because of the hilighted apostrophe
Code:
<html>
<head>
<title>test</title>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
var tableRow = New Array(1);
tableRow[0] = '<p><a href="#" onclick="alert(\'hello\');return false;">test 1</a></p>';
tableRow[1] = '<p><a href="#" onclick="alert(\'There\'s no place like home\');return false;">test 2</a></p>';
var txt = '';
for(var iLoop = 0; iLoop <= 1; iLoop++){
txt +=tableRow;
}
document.getElementById("grid").innerHTML = txt;
</script>
</body>
</html>
Any ideas will be greatly appreciated
Cheers Al
Re: Nested quotes with html and javascript
You need to insert an escaped slash character before the original escaped single quote character. The first two single quotes in the alert() method are printed as single quotes in the HTML, so adding a third quote character will mess this up. The extra slash is required to escape the quote when it is all printed into HTML. The javascript code at the bottom gives an alert box containing the HTML that would be printed by the first JS code so you can see where the extra escaped slash is required.
I also removed the for loop as it was unnecessary. the join() method will combine all array elements together with a newline character separating them.
HTML Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
var tableRow = new Array();
tableRow[0] = '<p><a href="#" onclick="alert(\'hello\');">test 0</a></p>';
tableRow[1] = '<p><a href="#" onclick="alert(\'There\\\'s no place like home\');">test 1</a></p>';
tableRow[2] = '<p><a href="#" onclick="alert(\'hello2\');">test 2</a></p>';
document.getElementById("grid").innerHTML = tableRow.join("\n");
</script>
<script type="text/javascript">
alert(document.getElementById("grid").innerHTML);
</script>
</body>
</html>
Re: Nested quotes with html and javascript
tr333,
Thanks very much for your reply, much appreciated.
I'd already tried what you've suggested and it didn't work, so must have been doing something else wrong, anyway if tried it again and it's working, so I'm happy.
Cheers Al
Re: [RESOLVED] Nested quotes with html and javascript
You really should use the createElement and appendChild methods rather than innerHTML: The latter won't work in an XML document, which you should technically be sending XHTML 1.0 Strict as.
Re: [RESOLVED] Nested quotes with html and javascript
Penagate,
Thanks for the tip, I'll look into it
Cheers Al
Re: [RESOLVED] Nested quotes with html and javascript
penagate: though practically in the wild, XHTML1 has lost itself to not being a real XML document thanks to the browser support. And they can't change that anymore, if they make a dramatical change in one browser, that'll break tons of sites that use XHTML in the incorrect way. There really is no way to ensure the backwards compatibility of the current sites.
So I believe we won't ever see a browser that handles XHTML1 exactly as it should be. And that is why we keep seeing innerHTML working practise.
(Firefox 1 tried to be different, they ended up restoring the functionality. You just don't want to break thousands of sites only to force usage of a standard better: you only get negative feedback and angry users.)
Re: [RESOLVED] Nested quotes with html and javascript
Yes, I realise, but createElement/appendChild are superior anyway.
