Enable the unicorn/prefer-dom-node-append ESLint plugin rule

This rule will help enforce slightly shorter code, especially since you can insert multiple elements at once, and according to MDN `Element.append()` is available in all browsers that we currently support.

Please find additional information here:
 - https://developer.mozilla.org/en-US/docs/Web/API/Element/append
 - https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-dom-node-append.md

test/driver.js

@@ -192,10 +192,10 @@ class Rasterize {
     foreignObject.setAttribute("height", `${viewport.height}px`);
 
     const style = document.createElement("style");
-    foreignObject.appendChild(style);
+    foreignObject.append(style);
 
     const div = document.createElement("div");
-    foreignObject.appendChild(div);
+    foreignObject.append(div);
 
     return { svg, foreignObject, style, div };
   }
@@ -238,8 +238,8 @@ class Rasterize {
 
       // Inline SVG images from text annotations.
       await inlineImages(div);
-      foreignObject.appendChild(div);
-      svg.appendChild(foreignObject);
+      foreignObject.append(div);
+      svg.append(foreignObject);
 
       await writeSVG(svg, ctx);
     } catch (reason) {
@@ -268,7 +268,7 @@ class Rasterize {
       await task.promise;
 
       task.expandTextDivs(true);
-      svg.appendChild(foreignObject);
+      svg.append(foreignObject);
 
       await writeSVG(svg, ctx);
     } catch (reason) {
@@ -302,7 +302,7 @@ class Rasterize {
 
       // Some unsupported type of images (e.g. tiff) lead to errors.
       await inlineImages(div, /* silentErrors = */ true);
-      svg.appendChild(foreignObject);
+      svg.append(foreignObject);
 
       await writeSVG(svg, ctx);
     } catch (reason) {
@@ -468,7 +468,7 @@ class Driver {
           xfaStyleElement = document.createElement("style");
           document.documentElement
             .getElementsByTagName("head")[0]
-            .appendChild(xfaStyleElement);
+            .append(xfaStyleElement);
         }
 
         const loadingTask = getDocument({

test/resources/reftest-analyzer.js

@@ -79,7 +79,7 @@ window.onload = function () {
     r.setAttribute("y", (gMagZoom * -gMagHeight) / 2);
     r.setAttribute("width", gMagZoom * gMagWidth);
     r.setAttribute("height", gMagZoom * gMagHeight);
-    mag.appendChild(r);
+    mag.append(r);
     mag.setAttribute(
       "transform",
       "translate(" +
@@ -124,8 +124,7 @@ window.onload = function () {
         p2.setAttribute("stroke-width", "1px");
         p2.setAttribute("fill", "#888");
 
-        mag.appendChild(p1);
-        mag.appendChild(p2);
+        mag.append(p1, p2);
         gMagPixPaths[x][y] = [p1, p2];
       }
     }
@@ -251,7 +250,7 @@ window.onload = function () {
     const table = document.getElementById("itemtable");
     table.textContent = ""; // Remove any table contents from the DOM.
     const tbody = document.createElement("tbody");
-    table.appendChild(tbody);
+    table.append(tbody);
 
     for (const i in gTestItems) {
       const item = gTestItems[i];
@@ -276,8 +275,8 @@ window.onload = function () {
         text += "S";
         rowclass += " skip";
       }
-      td.appendChild(document.createTextNode(text));
-      tr.appendChild(td);
+      td.append(document.createTextNode(text));
+      tr.append(td);
 
       td = document.createElement("td");
       td.id = "url" + i;
@@ -290,14 +289,14 @@ window.onload = function () {
         a.id = i;
         a.className = "image";
         a.href = "#";
-        a.appendChild(text);
-        td.appendChild(a);
+        a.append(text);
+        td.append(a);
       } else {
-        td.appendChild(text);
+        td.append(text);
       }
-      tr.appendChild(td);
+      tr.append(td);
       tr.className = rowclass;
-      tbody.appendChild(tr);
+      tbody.append(tr);
     }
 
     // Bind an event handler to each image link
@@ -481,8 +480,8 @@ window.onload = function () {
           p2.setAttribute("fill", color2);
           if (color1 !== color2) {
             gFlashingPixels.push(p1, p2);
-            p1.parentNode.appendChild(p1);
-            p2.parentNode.appendChild(p2);
+            p1.parentNode.append(p1);
+            p2.parentNode.append(p2);
           }
           if (i === 0 && j === 0) {
             centerPixelColor1 = color1;

test/unit/custom_spec.js

@@ -134,7 +134,7 @@ describe("custom ownerDocument", function () {
       fonts: new Set(),
       createElement,
       documentElement: {
-        getElementsByTagName: () => [{ appendChild: () => {} }],
+        getElementsByTagName: () => [{ append: () => {} }],
       },
     };
     const CanvasFactory = new DefaultCanvasFactory({ ownerDocument });

test/unit/display_svg_spec.js

@@ -84,8 +84,8 @@ describe("SVGGraphics", function () {
           let svgImg;
           // A mock to steal the svg:image element from paintInlineImageXObject.
           const elementContainer = {
-            appendChild(element) {
-              svgImg = element;
+            append(...elements) {
+              svgImg = elements.at(-1);
             },
           };