Element.appendChild() hosed in IE .. workaround? (related to innerText vs textContent)
- by Rowe Morehouse
I've heard that using el.innerText||el.textContent can yield unreliable cross-browswer results, so I'm walking the DOM tree to collect text nodes recursively, and write them into tags in the HTML body.
What this script does is read hash substring valus from the window.location and write them into the HTML.
This script is working for me in Chrome & Firefox, but choking in IE.
I call the page with an URL syntax like this:
http://example.com/pagename.html#dyntext=FOO&dynterm=BAR&dynimage=FRED
UPDATE UPDATE UPDATE
Solution:
I moved the scripts to before </body> (where they should have been) then removed console.log(sPageURL); and now it's working in Chrome, Firefox, IE8 and IE9.
This my workaround for the innerText vs textContent crossbrowser issue when you are just placing text rather than getting text. In this case, getting hash substring values from the window.location and writing them into the page.
<html>
<body>
<span id="dyntext-span" style="font-weight: bold;"></span><br />
<span id="dynterm-span" style="font-style: italic;"></span><br />
<span id="dynimage-span" style="text-decoration: underline;"></span><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
var tags = ["dyntext", "dynterm", "dynimage"];
for (var i = 0; i < tags.length; ++i) {
var param = GetURLParameter(tags[i]);
if (param) {
var dyntext = GetURLParameter('dyntext');
var dynterm = GetURLParameter('dynterm');
var dynimage = GetURLParameter('dynimage');
}
}
var elem = document.getElementById("dyntext-span");
var text = document.createTextNode(dyntext);
elem.appendChild(text);
var elem = document.getElementById("dynterm-span");
var text = document.createTextNode(dynterm);
elem.appendChild(text);
var elem = document.getElementById("dynimage-span");
var text = document.createTextNode(dynimage);
elem.appendChild(text);
});
function GetURLParameter(sParam) {
var sPageURL = window.location.hash.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}
</script>
</body>
</html>
FINAL UPDATE
If your hash substring values require spaces (like a linguistic phrase with three words, for example) then separate the words with the + character in your URI, and replace the unicode \u002B character with a space when you create each text node, like this:
var elem = document.getElementById("dyntext-span");
var text = document.createTextNode(dyntext.replace(/\u002B/g, " "));
elem.appendChild(text);
var elem = document.getElementById("dynterm-span");
var text = document.createTextNode(dynterm.replace(/\u002B/g, " "));
elem.appendChild(text);
var elem = document.getElementById("dynimage-span");
var text = document.createTextNode(dynimage.replace(/\u002B/g, " "));
elem.appendChild(text);
Now form your URI like this:
http://example.com/pagename.html#dyntext=FOO+MAN+CHU&dynterm=BAR+HOPPING&dynimage=FRED+IS+DEAD
