Element.appendChild() hosed in IE .. workaround? (related to innerText vs textContent)
Question
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 \+ 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
1 answers
solution1
0 ACCPTED 2012-09-01 15:37:44
When having console.log() in the code, you must have Dev Tools opened in IE. Also missing head element may cause some problems. Or is it missing only in this post?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.