How to inject NoScope elements into a page
How to inject NoScope elements into a page with innerHTMLYou can inject script with innerHTML, but it can be a little tricky. The example above works around this limitation, but doesn't really explain how it is done.
Internally, Internet Explorer treats the <script> tag as a NoScope element, which means (according to a rather opaque comment in the source) that "no text in a textrun should point to it." Examples of other tags that have this attribute are HTML comments (<!-- -->) and STYLE tags. All NoScope elements are removed from the beginning of the parsed HTML before it is injected with innerHTML or insertAdjacentHTML. To prevent this from happening, you must include at least one scoped element at the beginning of the injected HTML.
The following example injects a script block into the injectionDiv, but nothing happens.
<div id="injectionDiv"> </div><script type="text/javascript"> injectionDiv.innerHTML='<script defer>alert("hello");</' + 'script>';</script>
To make it work, you must start the injected HTML string with a scoped element, preferably an invisible one like a hidden input element.
injectionDiv.innerHTML='<input type="hidden"/><script defer>alert("hello");</' + 'script>';
Note The strange '</' + 'script>' construct prevents the real SCRIPT block from closing prematurely.
The same rules apply to injected STYLE elements. All we have to do is put the style block after the element it modifies.
injectionDiv.innerHTML='<div class="myClass"> </div><style type="text/css">.myClass{background-color:green;}</style>';
That said, you really should put all style rules in the HEAD for strict compliance with XHTML. Doing this can also be a little tricky because you cannot use innerHTML to inject into the HEAD or STYLE element directly. (Both of these tags are READ ONLY.) The best way to dynamically add styles to a page is to wait for the document to load, and then create the rule in a new style sheet.
window.onload = function() { document.createStyleSheet().addRule('.myClass', 'background-color:blue!important;');}
"The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR."
补充：web前端 , JavaScript ,
