The encoding of innerHTML is exclusive to Chrome browsers

Question

The encoding of innerHTML is exclusive to Chrome browsers

When I incorporate external SVG files, I define some styles within them like so :

<style type="text/css">
<![CDATA[
    .st1 {fill:#ffffff;stroke:#808080;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.5;stroke-width:0.75}
    .st2 {fill:#444444;font-family:Calibri;font-size:0.833336em;font-weight:bold}
    .st3 {fill:#f8eccc;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
    .st4 {fill:#444444;font-family:Calibri;font-size:0.75em;font-weight:bold}
]]>
</style>

To add more style dynamically using JavaScript, I implemented the following approach :

console.log("style innerHTML before :\n" + document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML);
var styleContent = document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML;
styleContent = styleContent.slice(0, styleContent.lastIndexOf("}") + 1) + "\n\trect:hover {fill:#698B89}\n\t]]>\n";
document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML = styleContent;
console.log("style innerHTML after :\n" + document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML);

This method works as expected in Firefox with the modified inner HTML showing the added style correctly.

However, when tested in Chrome, it doesn't render properly and displays:

&lt;![CDATA[
.st1 {fill:#ffffff;stroke:#808080;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.5;stroke-width:0.75}
.st2 {fill:#444444;font-family:Calibri;font-size:0.833336em;font-weight:bold}
.st3 {fill:#f8eccc;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
.st4 {fill:#444444;font-family:Calibri;font-size:0.75em;font-weight:bold}
rect:hover {fill:#698B89}
]]&gt;

The issue seems to be with how Chrome handles the <and > characters, replacing them with < and > entities specifically on this browser.

javascript html css svg

Answer 1

Answer №1

The issue you are experiencing is a result of the differences in how various browsers handle DOM nodes when using the method Element.innerHTML(). This discrepancy becomes evident when examining the <style> node prior to any modifications. Across all browsers, this node consists of three child nodes: [text, cdata-section, text]. The two nodes of type text contain whitespace surrounding the cdata-section.

When the method Element.innerHTML() is utilized, Firefox and Internet Explorer will maintain this DOM structure by replacing it with an updated <style> element that retains the original subtree structure. However, Chrome interprets the updated styleContent string as character data, resulting in only one node of type text. Since the <style> element only allows character data content, Chrome escapes any markup present within it. Subsequently, the style in Chrome will consist of just one text node, rendering it unsuitable for further processing.

To address this issue, I have created a Plunk demonstrating a more reliable solution:

// Retrieve style node.
var style = document.querySelector("object").contentDocument.querySelector("style");

// Extract CDATA-Section from the style's childNodes.
var cdata = getCDATA(style.childNodes);

// Manipulate the CDATA content.
var styleContent = cdata.textContent;
styleContent += "\n\t\tpath:hover {fill:#698B89;}";

// Update the CDATA-section node.
cdata.textContent = styleContent;

function getCDATA(nodelist) {
    for (var i=0; i < nodelist.length; i++) {
        var node = nodelist.item(i);
        if (node.nodeType == Element.CDATA_SECTION_NODE) {
            return node;
        }
    }
}

By following this approach, you can access the node of type cdata-section and easily modify its textContent. Without forcing the browser to reconstruct part of its DOM tree using Element.innerHTML(), the structure of the <style> DOM subtree remains consistent across browsers, ensuring uniform outcomes.

Answer 2

The issue you are experiencing is a result of the differences in how various browsers handle DOM nodes when using the method Element.innerHTML(). This discrepancy becomes evident when examining the <style> node prior to any modifications. Across all browsers, this node consists of three child nodes: [text, cdata-section, text]. The two nodes of type text contain whitespace surrounding the cdata-section.

When the method Element.innerHTML() is utilized, Firefox and Internet Explorer will maintain this DOM structure by replacing it with an updated <style> element that retains the original subtree structure. However, Chrome interprets the updated styleContent string as character data, resulting in only one node of type text. Since the <style> element only allows character data content, Chrome escapes any markup present within it. Subsequently, the style in Chrome will consist of just one text node, rendering it unsuitable for further processing.

To address this issue, I have created a Plunk demonstrating a more reliable solution:

// Retrieve style node.
var style = document.querySelector("object").contentDocument.querySelector("style");

// Extract CDATA-Section from the style's childNodes.
var cdata = getCDATA(style.childNodes);

// Manipulate the CDATA content.
var styleContent = cdata.textContent;
styleContent += "\n\t\tpath:hover {fill:#698B89;}";

// Update the CDATA-section node.
cdata.textContent = styleContent;

function getCDATA(nodelist) {
    for (var i=0; i < nodelist.length; i++) {
        var node = nodelist.item(i);
        if (node.nodeType == Element.CDATA_SECTION_NODE) {
            return node;
        }
    }
}

By following this approach, you can access the node of type cdata-section and easily modify its textContent. Without forcing the browser to reconstruct part of its DOM tree using Element.innerHTML(), the structure of the <style> DOM subtree remains consistent across browsers, ensuring uniform outcomes.

The encoding of innerHTML is exclusive to Chrome browsers

Answer №1

Similar questions

Expanding interfaces dynamically in Typescript

Fb.UI Dialogs now appearing in Popups rather than an iframe (part 2)

when an element is hovered over, it activates a reaction on a different element

Can a Chrome extension display a webpage in a separate window using only JS, HTML, and CSS?

Locate the ID of the element targeted by the cursor in a contenteditable field

Issue with Material-UI: Inability to Activate the onChangeCommitted Event while Testing

Storing form information into a collection with the help of meteor methods

Recognize when the DOM undergoes modifications

The size attributes on <img> tags do not function as expected

How to keep a div element fixed on the page's border vertically and horizontally adhered

Ways to conceal and reveal an item within a three.js environment

Transfer all the child nodes to the parent using the spread operator or Object.assign while preventing duplicate properties from being overwritten

Tips on sorting ID strings that include a specific substring

AngularJS bidirectional binding with numerous select choices

What could be causing the frequent client disconnections and reconnections in a basic node, express, socket.io, and jade application?

Dynamically inserting templates into directives

JQuery Navigation Bar Functions Properly on the Homepage

CSS for a navigation menu with underlined links

"A curious situation arose when using Axios in a Firebase function, where a pending promise was unexpectedly returned even within the confines

Creating a fresh shortcut on the selenium IDE