Unexpected call to method or property access - appendChild()

Question

I have created a bookmarklet that executes the below code, adding css styling to the page. It works on all tried sites in Chrome and Firefox, but fails for some sites on IE. It's always the same sites that fail.

The fourth line fails with "Unexpected call to method or property access" for SOME sites, only on IE.

var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(""));
head.appendChild(style);

Two sites that fail on IE 10:

http://www.momswhothink.com/cake-recipes/banana-cake-recipe.html

http://www.bakerella.com/

score 3 · Accepted Answer · edited May 23 '17 at 12:01

3

I think your problem is this line:

style.appendChild(document.createTextNode(""));

Here you are inserting a Text Node into a Style element, which according to the HTML specification is not allowed, unless you specify a scoped attribute on the style.

Check the specification of style here (Text Node is flow content).

You can find good ways to create the style element in a crossbrowser way here.

edited May 23 '17 at 12:01

Community

1
1

answered Aug 23 '13 at 19:27

Jonathan Naguin

14,526
6
46
75

I'm not sure how that translates into a solution? How should I set this? – user984003 Aug 23 '13 at 19:34
Check this post http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript There are several good ways of create the `style` element in a crossbrowser way – Jonathan Naguin Aug 23 '13 at 19:37
That nailed it! I added style.type = 'text/css'; and now it works. Weird that it's only an issue with some sites. Want to include this with your answer? – user984003 Aug 23 '13 at 19:53
@user984003 I included the link to post, which contains your solution then :) – Jonathan Naguin Aug 23 '13 at 20:06

Ahmed Alaa El-Din · Answer 2 · 2013-08-23T19:10:39.390

0

probably because you forgot to add document.ready()

Using jquery

$(document).ready(function(){
  var head = document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(""));
  head.appendChild(style);
});

Using javascript

Try wrapping your javascript in an onload function. So first add:

<body onload="load()">

function load() {
      var head = document.getElementsByTagName('head')[0];
      var style = document.createElement('style');
      style.type = 'text/css';
      style.appendChild(document.createTextNode(""));
      head.appendChild(style);
}

edited Aug 23 '13 at 19:10

answered Aug 23 '13 at 19:04

Ahmed Alaa El-Din

1,813
1
16
19

I'm not using jquery. Is there a js equivalent? – user984003 Aug 23 '13 at 19:07
i updated it with another solution for javascript,hope it works fine with you. – Ahmed Alaa El-Din Aug 23 '13 at 19:11
Not sure I can add an onload event to the body. Think it would be a circular problem. I put my code inside an setinterval function with a try catch and waited a long time. It never came through. – user984003 Aug 23 '13 at 19:36
setinterval will keep loading the function many times every time you specify,but onload will load it only once. you can try it – Ahmed Alaa El-Din Aug 23 '13 at 19:38

score 0 · Answer 3 · answered Aug 23 '13 at 19:34

I'm not sure why you're getting that error in IE10... I know in IE<9 an error is thrown if you try to modify the innerHTML of a <style> tag. It's still doable, you just have to do a bit of a workaround. For example (using jQuery):

var customCSS = "body { color: red; }";
var customStyle = $('<style type="text/css" />');
try {
    $(customStyle).html(customCSS); // Good browsers
} catch(error) { 
    $(customStyle)[0].styleSheet.cssText = customCSS; // IE < 9
}
$(customStyle).appendTo('head');

Hope this helps.

score 0 · Answer 4 · answered May 06 '14 at 03:12

Do you really have to dynamically add the style section to the page? What about adding the attribute, itself, on the fly, like this:

$(document).ready( function() {
    $('[id="yourObjID"]').css('yourAttribute','itsvalue');
});

Adding the style section dynamically, rather than the attribute, seems like way overkill, to me.

Unexpected call to method or property access - appendChild()

4 Answers4