how to find a dynamictly created <style> element?

Question

I'm creating a style element like this :

function createMyStyle(selector , rule){
   j$("head").append('<style type="text/css">' + selector + '{' + rule + '}' + '</style>');
}

Now, I don't want to create this element every time, but to find out if this element was inserted already, and then use something like this to add my rules to it:

if( stylesheet.addRule ){
 stylesheet.addRule(selector, rule);
} 
else if( stylesheet.insertRule ){
 stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}

PS: I create this in one piece and not with pure DOM because IE can't do innerHTML to document.createElement('style') ...

I tried giving the and ID and do something like

for( var i in document.styleSheets ){
  if( !document.styleSheets[i].id){

but this can't be done cause theres no ID attribute to it.

Answer 1

Try doing something like this with jQuery:

if($("style").length > 0){
  // this means you have a style  element in your document
}

Answer 2

Giving it an id should work.

$('head').append('<style id="some-id"> ... </style>');

console.log($('#some-id'));

However, in case you're not aware, there are much easier ways to add and remove styles from a document in jQuery.