This innerHTML code wasn't working reliably in IE8:
(but was working in IE6 IE7 FF Opera Chrome Safari)
(by not working reliably I mean I had placed this code within onmouseover handlers on various elements, sometimes it would change the text when mousing over a given element and sometimes it wouldn't - there was no pattern to this - whether it would work or not seemed to be totally random)
document.getElementById("mydiv").innerHTML="some text";
DOM methods (removing and re-adding the div with updated text) weren't helping either.
So I added this immediately after the above code and it fixed it:
document.styleSheets[0].addRule("#mydiv:after", "content: ' ';");
Using conditional comments I identified this 2nd line of code as for IE8 only
I am positive this will save people a lot of time since I have wasted ages on this!
Even Jquery.text() wasn't helping!
I have read elsewhere that the innerHTML will update the DOM but can fail to update screen elements. I believe the CSS rule works because it changes the content of the after pseudo class of #mydiv dynamically and thus requires the content of mydiv to be updated, thus updating the screen (something innerHTML was failing to do).
However if anyone has a better solution I'd love to hear - Thanks
EDITED AS REQUESTED
You can use innerText in place of innerHTML
Related
This is a shot in the dark whether or not anyone can help determine the source of this bug.
It was brought to my attention today that some JS in our web-app causes IE9 to replace the text-node content of an anchor tag, with the href attribute content. This completely breaks the styling of the top-level navigation. The curious thing, is that it only happens on one page in the application.
I've seen other answers to related questions and jQuery bug reports saying that IE9 does do this behavior when the href attribute is programmatically changed. The solution in those cases was to save the innerHTML before and after the change, and replace it with the original content. However, I don't think this is the cause of the problem.
This page is a Frankenstein of libraries; It includes GMaps API, Bootstrap.JS, Backbone.JS, Angular, Require.JS, IE polyfils, and a ton of proprietary stuff. I've tried in vain to figure out the source of this problem, and it would be good to know anything the codebase could be doing which would trigger this behaviour in IE.
Does anyone know of other factors which could cause IE to replace an <a> tag's innerHTML with the href value?
I'm loading 2 embedded svg-lets in a page. One animated one not. They're loaded in sequence with a setTimeout.
When I load the animated first all goes well, the animation starts as expected and the second static svg is correctly displayed afterwards. When I first load the second, and afterwards the animated one, the animation does not start.
Code is here: jsfiddle switch #svg1, and #svg2 in the javascript.
Upon browser checking I found out this is probably a webkit bug as chrome and safari both show this behavior FF 12 and Opera are well.
Can this be fixed with JS code or should I file a bug with webkit?
== Added
I think the question should be rephrased why the animation does not start after the svg is loaded with a settimeout.
As Jared investigated below it works when the element is present in the DOM and is reordered via dom manipulation into the focus element, Chrome and webkit need a kick with a beginElement() call to the animate element. This still doesn't work out for elements constructed from plain text. As I only do have a mac and I still consider this a hobby project I leave MS IE completely out of the loop.
Well, it took quite a bit longer than I anticipated, but I got it worked out. Basically, the method you were using with the semi-SVG and the regex on the markup, etc., was to say the least not quite the way to get it done.
The answer is to use svg DOM animation methods and attributes, especially to start/stop the animation when you want it to run. Apparently, Firefox was just fine with reinitializing the element and the animation just by manipulating the inner HTML/markup. Chrome (Webkit?), however, actually needs you to programmatically access and control the element. I have not checked in IE, Opera or Safari.
I redid the example, leaving out the arrow altogether, as it is unrelated to the problem. I instead concentrated on creating and testing the animation functionality. The critical points you were missing before were:
var $lasso = $('#lasso'),
animater = $lasso.find('animate')[0],
...
animater.beginElement();
...
animater.endElement();
Here is the demo I made, which is significantly different that what you have in your question:
http://jsfiddle.net/9hBfs/
What I call the "lasso" effect is still there, though.
I would reference the Mozilla Developer Network (MDN) site, as they have a lot of great information and are a highly trusted authority:
https://developer.mozilla.org/en/SVG
https://developer.mozilla.org/en/SVG/Element/animate
http://www.w3.org/TR/SVG11/animate.html#animation-mod
http://www.w3.org/TR/SVG11/animate.html#InterfaceElementTimeControl
http://www.w3.org/TR/SVG11/animate.html#RestartAttribute
The following piece of code, works correctly in Firefox and Chrome, but it gives me a headache in IE.
var anotherDiv= document.getElementById("anotherDiv");
var destination = document.getElementById("mySourceDiv");
destination.appendChild(anotherDiv);
I'm trying to get a Div element and place it inside another div.
I get an error message (in the debug console in IE) similar to "interface not supported", and points me to the appendChild line.
What I've seen is that the type of the destination variable is an object rather then a DOM element.
What can I do to append the anotherDiv to mySourceDiv?
I'm trying this in IE 8.
You probably will need something like an importNode, there are various cross browser solutions around. The issue is that each node has a corresponding document object on it, in IE and so called security doesn't play nice moving things from one document to another.
So, essentially it's doing a deep clone, but the difference between using cloneNode is that cloneNode also sets the document which you don't want.
This might get you going in the right direction:
IE support for DOM importNode
I'd recommend using a library designed to sort through the browser incompatibilities for you. I've personally found jQuery to be quite good. jQuery has an append function.
I made this fiddle that listens for a few different MutationEvents, specifically DOMCharacterDataModified, DOMSubtreeModified, and DOMNodeInserted when changing the innerHTML of a div.
http://jsfiddle.net/newtang/kysTm/15/
Interestingly, Chrome shows:
DOMCharacterDataModified, DOMSubtreeModified
while Firefox 5 shows: DOMNodeInserted.
I'm not actually sure who's correct. I found this old Mozilla bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=368133 and the W3 docs (http://www.w3.org/TR/DOM-Level-2-Events/events.html), but I don't find either particularly enlightening.
Does anyone know what the proper behavior is? I'd love to file a bug on someone so it's consistent.
WebKit has an "optimization" where if you set innerHTML to something that contains no markup and the first child of the node you're setting it on is a Text node they will modify the text in the textnode directly instead of doing what the spec calls for (removing all the children and creating a new Text child). Hence the difference in mutation events.
Firefox's behaviour seems to be correct. You setting the innerHTML, so you do not change the characterData of an existing textNode, you insert a new textNode and remove any existing contents .(You may also observe DOMNodeRemoved in your example, you'll see that it fires too)
See the difference when really modifying the data of a textNode: http://jsfiddle.net/doktormolle/yQu8v/
I am passing a string containing HTML tags (center, ul, etc) to a function which then places it in a div, span or p innerHTML. This works great in all browsers but IE, which displays nothing. I tracked the problem the the tags, because plain text does display in IE.
I am using IE 9.
The code is a little long for posting, but here is the idea:
str='<center>Some text</center>';
displayText('divId',str);
function displayText(id,str)
{ document.getElementById(id).innerHTML=str; }
Sorry everyone. I found that I could not set the innerHTML of a [P] element. I changed it to a [span] and it worked.
innerHTML is not a good idea (or needs a workaround) for <table>, <select>, <p> elements. This is a known limitation in older versions IE.
Also see this question IE innerHTML error.
Glad that you found a solution..
You should consider using jquery. Then you don't have to worry about all the cross browser implementations & instead focus on adding/enhancing functionality & user experience on your site/application.