Mailing List Archive

   tlug.jp -> Mailing List -> tlug archive -> tlug Mailing List Archive

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [tlug] Javascript and I have different ideas about what "concatenate" means.

Hi Dave,

based on Ruben's trial, I guess your browser/configuration is not
capable of correctly dealing with innerHTML when this contains a DOM
fragment.

I would suggest appendChild()...it's more tedious as you have to built
the HTML you need appending each child on a separate instruction but
you should be able to solve your problems.

You can try the code below (working perfectly on my openSUSE - Mozilla
3.6 machine):
<html>
	<head>
		<script language="JavaScript">
			function addNestedDivBlock()
			{
				var divLv3 = document.createElement("div"); //putting the whole
<div style="...">Div content</div> doesn't work with Firefox
				divLv3.className = "3";
				divLv3.style.margin = '0 0 0 100px';
				divLv3.innerHTML = 'Lv3 content';

				var divLv2 = document.createElement("div"); //putting the whole
<div style="...">Div content</div> doesn't work with Firefox
				divLv2.className = "2";
				divLv2.style.margin = '0 0 0 50px';
				divLv2.innerHTML = 'Lv2 content';

				var divLv1 = document.createElement("div"); //putting the whole
<div style="...">Div content</div> doesn't work with Firefox
				divLv1.className = "1";
				divLv1.innerHTML = 'Lv1 content';

				divLv2.appendChild(divLv3);
				divLv1.appendChild(divLv2);
				document.getElementById('parentDiv').appendChild(divLv1);
			}
		</script>

		<title>
		</title>
	</head>

	<body>
		<button onclick="addNestedDivBlock()">Add block of divs</button>

		<div id="parentDiv">
		</div>
	</body>
</html>

Hope it can works for you too.

Regards,

Marco


2010/12/15, Dave M G <dave@example.com>:
> Marco, David, Ruben,
>
> Thank you for responding.
>
> Just for clarity, the divs all have classes, not IDs, and I removed the
> last forward slash at the end of the code that might have been causing
> trouble.
>
> So I'm pretty sure I've got the HTML syntax right.
>
> Also, I dumped the content of my output variable to console.log() and it
> seems to be formatting correctly, so Marco's suggestion that innerHTML
> is doing some kind of validation seems to be right. The content of the
> variable is right, but innerHTML is parsing it into crap.
>
> So I've been looking for ways to write the variable into the div, and
> everything works in some weird way. I've tried insertBefore (doesn't
> seem to like nested divs), writeIn (clobbers the whole page), and
> appendChild (don't know what the heck it's doing).
>
> Isn't there some way you can just dynamically write a chunk of prepared
> HTML into an existing page? The chunk of HTML I'm writing comes from a
> JSON returned from the server, so I want to be able to rewrite the div
> contents whenever I get new data.
>
> --
> Dave M G
>
> --
> To unsubscribe from this mailing list,
> please see the instructions at http://lists.tlug.jp/list.html
>
> The TLUG mailing list is hosted by the award-winning Internet provider
> ASAHI Net.
> Visit ASAHI Net's English-language Web page: http://asahi-net.jp/en/
>
Home | Main Index | Thread Index

Home Page Mailing List Linux and Japan TLUG Members Links