insertRule

insertRule is a method of the CSSStyleSheet interface in the CSS Object Model (CSSOM). It inserts a new CSS rule into a stylesheet at a specified index and returns the index of the newly inserted rule. The rule parameter must be a valid CSS rule expressed as a string, such as "body { background: #fff; }". The index indicates the position in the stylesheet’s CSSRuleList; 0 places the rule at the beginning, and an index equal to the current length appends it to the end.

This method enables dynamic styling by adding rules at runtime, which updates the document’s styling immediately for elements affected by the new rule. It is commonly used for implementing themes, user preferences, or on-the-fly style adjustments.

Return value and exceptions: The method returns the index of the inserted rule. If the rule cannot be parsed, or the index is out of range, a DOMException is thrown, typically with SYNTAX_ERR for invalid rules or INDEX_SIZE_ERR for an invalid index. Access to modify a stylesheet may be restricted by cross-origin security policies, in which case a SecurityError can be raised.

Example: var sheet = document.styleSheets[0]; sheet.insertRule("body { background: #f0f0f0; }", 0);

See also: deleteRule, CSSStyleSheet, CSSRule, CSSRuleList.