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

.eslintrc

@@ -51,6 +51,7 @@
     "unicorn/no-useless-spread": "error",
     "unicorn/prefer-at": "error",
     "unicorn/prefer-date-now": "error",
+    "unicorn/prefer-dom-node-append": "error",
     "unicorn/prefer-dom-node-remove": "error",
     "unicorn/prefer-string-starts-ends-with": "error",
 

examples/node/domstubs.js

@@ -100,6 +100,15 @@ DOMElement.prototype = {
     this.setAttribute(name, value);
   },
 
+  append: function DOMElement_append(...elements) {
+    const childNodes = this.childNodes;
+    for (const element of elements) {
+      if (!childNodes.includes(element)) {
+        childNodes.push(element);
+      }
+    }
+  },
+
   appendChild: function DOMElement_appendChild(element) {
     const childNodes = this.childNodes;
     if (!childNodes.includes(element)) {

examples/text-only/pdf2svg.js

@@ -43,7 +43,7 @@ function buildSVG(viewport, textContent) {
     text.setAttribute("transform", "matrix(" + tx.join(" ") + ")");
     text.setAttribute("font-family", style.fontFamily);
     text.textContent = textItem.str;
-    svg.appendChild(text);
+    svg.append(text);
   });
   return svg;
 }
@@ -57,7 +57,7 @@ async function pageLoaded() {
   const textContent = await page.getTextContent();
   // building SVG and adding that to the DOM
   const svg = buildSVG(viewport, textContent);
-  document.getElementById("pageContainer").appendChild(svg);
+  document.getElementById("pageContainer").append(svg);
   // Release page resources.
   page.cleanup();
 }

extensions/chromium/contentscript.js

@@ -160,7 +160,7 @@ function updateObjectElement(elem) {
   if (!iframe || !iframe.__inserted_by_pdfjs) {
     iframe = createFullSizeIframe();
     elem.textContent = "";
-    elem.appendChild(iframe);
+    elem.append(iframe);
     iframe.__inserted_by_pdfjs = true;
   }
   iframe.src = getEmbeddedViewerURL(elem.data);

extensions/chromium/options/options.js

@@ -155,7 +155,7 @@ function renderBooleanPref(shortDescription, description, prefName) {
     storageArea.set(pref);
   };
   wrapper.querySelector("span").textContent = shortDescription;
-  document.getElementById("settings-boxes").appendChild(wrapper);
+  document.getElementById("settings-boxes").append(wrapper);
 
   function renderPreference(value) {
     checkbox.checked = value;
@@ -172,7 +172,7 @@ function renderEnumPref(shortDescription, prefName) {
     storageArea.set(pref);
   };
   wrapper.querySelector("span").textContent = shortDescription;
-  document.getElementById("settings-boxes").appendChild(wrapper);
+  document.getElementById("settings-boxes").append(wrapper);
 
   function renderPreference(value) {
     select.value = value;
@@ -189,7 +189,7 @@ function renderDefaultZoomValue(shortDescription) {
     });
   };
   wrapper.querySelector("span").textContent = shortDescription;
-  document.getElementById("settings-boxes").appendChild(wrapper);
+  document.getElementById("settings-boxes").append(wrapper);
 
   function renderPreference(value) {
     value = value || "auto";

src/display/annotation_layer.js

@@ -448,7 +448,7 @@ class AnnotationElement {
       trigger = document.createElement("div");
       trigger.style.height = container.style.height;
       trigger.style.width = container.style.width;
-      container.appendChild(trigger);
+      container.append(trigger);
     }
 
     const popupElement = new PopupElement({
@@ -466,7 +466,7 @@ class AnnotationElement {
     // Position the popup next to the annotation's container.
     popup.style.left = container.style.width;
 
-    container.appendChild(popup);
+    container.append(popup);
   }
 
   /**
@@ -607,15 +607,15 @@ class LinkAnnotationElement extends AnnotationElement {
       return this._renderQuadrilaterals("linkAnnotation").map(
         (quadrilateral, index) => {
           const linkElement = index === 0 ? link : link.cloneNode();
-          quadrilateral.appendChild(linkElement);
+          quadrilateral.append(linkElement);
           return quadrilateral;
         }
       );
     }
 
     this.container.className = "linkAnnotation";
     if (isBound) {
-      this.container.appendChild(link);
+      this.container.append(link);
     }
 
     return this.container;
@@ -828,7 +828,7 @@ class TextAnnotationElement extends AnnotationElement {
       this._createPopup(image, this.data);
     }
 
-    this.container.appendChild(image);
+    this.container.append(image);
     return this.container;
   }
 }
@@ -1234,7 +1234,7 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
     this._setBackgroundColor(element);
     this._setDefaultPropertiesFromJS(element);
 
-    this.container.appendChild(element);
+    this.container.append(element);
     return this.container;
   }
 }
@@ -1319,7 +1319,7 @@ class CheckboxWidgetAnnotationElement extends WidgetAnnotationElement {
     this._setBackgroundColor(element);
     this._setDefaultPropertiesFromJS(element);
 
-    this.container.appendChild(element);
+    this.container.append(element);
     return this.container;
   }
 }
@@ -1408,7 +1408,7 @@ class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
     this._setBackgroundColor(element);
     this._setDefaultPropertiesFromJS(element);
 
-    this.container.appendChild(element);
+    this.container.append(element);
     return this.container;
   }
 }
@@ -1490,7 +1490,7 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
         optionElement.setAttribute("selected", true);
         addAnEmptyEntry = false;
       }
-      selectElement.appendChild(optionElement);
+      selectElement.append(optionElement);
     }
 
     let removeEmptyEntry = null;
@@ -1595,7 +1595,7 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
               const optionElement = document.createElement("option");
               optionElement.textContent = displayValue;
               optionElement.value = exportValue;
-              selectElement.appendChild(optionElement);
+              selectElement.append(optionElement);
             }
             if (selectElement.options.length > 0) {
               selectElement.options[0].selected = true;
@@ -1668,7 +1668,7 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
     this._setBackgroundColor(selectElement);
     this._setDefaultPropertiesFromJS(selectElement);
 
-    this.container.appendChild(selectElement);
+    this.container.append(selectElement);
     return this.container;
   }
 }
@@ -1734,7 +1734,7 @@ class PopupAnnotationElement extends AnnotationElement {
     this.container.style.left = `${popupLeft}px`;
     this.container.style.top = `${popupTop}px`;
 
-    this.container.appendChild(popup.render());
+    this.container.append(popup.render());
     return this.container;
   }
 }
@@ -1781,7 +1781,7 @@ class PopupElement {
     const title = document.createElement("h1");
     title.dir = this.titleObj.dir;
     title.textContent = this.titleObj.str;
-    popup.appendChild(title);
+    popup.append(title);
 
     // The modification date is shown in the popup instead of the creation
     // date if it is available and can be parsed correctly, which is
@@ -1796,7 +1796,7 @@ class PopupElement {
         date: dateObject.toLocaleDateString(),
         time: dateObject.toLocaleTimeString(),
       });
-      popup.appendChild(modificationDate);
+      popup.append(modificationDate);
     }
 
     if (
@@ -1811,7 +1811,7 @@ class PopupElement {
       popup.lastChild.className = "richText popupContent";
     } else {
       const contents = this._formatContents(this.contentsObj);
-      popup.appendChild(contents);
+      popup.append(contents);
     }
 
     if (!Array.isArray(this.trigger)) {
@@ -1826,7 +1826,7 @@ class PopupElement {
     }
     popup.addEventListener("click", this._hide.bind(this, true));
 
-    wrapper.appendChild(popup);
+    wrapper.append(popup);
     return wrapper;
   }
 
@@ -1845,9 +1845,9 @@ class PopupElement {
     const lines = str.split(/(?:\r\n?|\n)/);
     for (let i = 0, ii = lines.length; i < ii; ++i) {
       const line = lines[i];
-      p.appendChild(document.createTextNode(line));
+      p.append(document.createTextNode(line));
       if (i < ii - 1) {
-        p.appendChild(document.createElement("br"));
+        p.append(document.createElement("br"));
       }
     }
     return p;
@@ -1957,7 +1957,7 @@ class LineAnnotationElement extends AnnotationElement {
     line.setAttribute("stroke", "transparent");
     line.setAttribute("fill", "transparent");
 
-    svg.appendChild(line);
+    svg.append(line);
     this.container.append(svg);
 
     // Create the popup ourselves so that we can bind it to the line instead
@@ -2004,7 +2004,7 @@ class SquareAnnotationElement extends AnnotationElement {
     square.setAttribute("stroke", "transparent");
     square.setAttribute("fill", "transparent");
 
-    svg.appendChild(square);
+    svg.append(square);
     this.container.append(svg);
 
     // Create the popup ourselves so that we can bind it to the square instead
@@ -2051,7 +2051,7 @@ class CircleAnnotationElement extends AnnotationElement {
     circle.setAttribute("stroke", "transparent");
     circle.setAttribute("fill", "transparent");
 
-    svg.appendChild(circle);
+    svg.append(circle);
     this.container.append(svg);
 
     // Create the popup ourselves so that we can bind it to the circle instead
@@ -2106,7 +2106,7 @@ class PolylineAnnotationElement extends AnnotationElement {
     polyline.setAttribute("stroke", "transparent");
     polyline.setAttribute("fill", "transparent");
 
-    svg.appendChild(polyline);
+    svg.append(polyline);
     this.container.append(svg);
 
     // Create the popup ourselves so that we can bind it to the polyline
@@ -2199,7 +2199,7 @@ class InkAnnotationElement extends AnnotationElement {
       // instead of to the entire container (which is the default).
       this._createPopup(polyline, data);
 
-      svg.appendChild(polyline);
+      svg.append(polyline);
     }
 
     this.container.append(svg);
@@ -2376,7 +2376,7 @@ class FileAttachmentAnnotationElement extends AnnotationElement {
       this._createPopup(trigger, this.data);
     }
 
-    this.container.appendChild(trigger);
+    this.container.append(trigger);
     return this.container;
   }
 
@@ -2471,15 +2471,15 @@ class AnnotationLayer {
         }
         if (Array.isArray(rendered)) {
           for (const renderedElement of rendered) {
-            div.appendChild(renderedElement);
+            div.append(renderedElement);
           }
         } else {
           if (element instanceof PopupAnnotationElement) {
             // Popup annotation elements should not be on top of other
             // annotation elements to prevent interfering with mouse events.
             div.prepend(rendered);
           } else {
-            div.appendChild(rendered);
+            div.append(rendered);
           }
         }
       }
@@ -2557,7 +2557,7 @@ class AnnotationLayer {
 
       const { firstChild } = element;
       if (!firstChild) {
-        element.appendChild(canvas);
+        element.append(canvas);
       } else if (firstChild.nodeName === "CANVAS") {
         element.replaceChild(canvas, firstChild);
       } else {

src/display/display_utils.js

@@ -459,7 +459,7 @@ function loadScript(src, removeScriptElement = false) {
     script.onerror = function () {
       reject(new Error(`Cannot load script at: ${script.src}`));
     };
-    (document.head || document.documentElement).appendChild(script);
+    (document.head || document.documentElement).append(script);
   });
 }
 

src/display/editor/annotation_editor_layer.js

@@ -232,7 +232,7 @@ class AnnotationEditorLayer {
     editor.parent = this;
     if (editor.div && editor.isAttachedToDOM) {
       editor.div.remove();
-      this.div.appendChild(editor.div);
+      this.div.append(editor.div);
     }
   }
 
@@ -248,7 +248,7 @@ class AnnotationEditorLayer {
 
     if (!editor.isAttachedToDOM) {
       const div = editor.render();
-      this.div.appendChild(div);
+      this.div.append(div);
       editor.isAttachedToDOM = true;
     }
 

src/display/editor/freetext.js

@@ -211,11 +211,11 @@ class FreeTextEditor extends AnnotationEditor {
     style.fontSize = `calc(${this.#fontSize}px * var(--zoom-factor))`;
     style.color = this.#color;
 
-    this.div.appendChild(this.editorDiv);
+    this.div.append(this.editorDiv);
 
     this.overlayDiv = document.createElement("div");
     this.overlayDiv.classList.add("overlay", "enabled");
-    this.div.appendChild(this.overlayDiv);
+    this.div.append(this.overlayDiv);
 
     // TODO: implement paste callback.
     // The goal is to sanitize and have something suitable for this

src/display/editor/ink.js

@@ -353,7 +353,7 @@ class InkEditor extends AnnotationEditor {
   #createCanvas() {
     this.canvas = document.createElement("canvas");
     this.canvas.className = "inkEditorCanvas";
-    this.div.appendChild(this.canvas);
+    this.div.append(this.canvas);
     this.ctx = this.canvas.getContext("2d");
   }
 

src/display/font_loader.js

@@ -58,7 +58,7 @@ class BaseFontLoader {
       styleElement.id = `PDFJS_FONT_STYLE_TAG_${this.docId}`;
       this._document.documentElement
         .getElementsByTagName("head")[0]
-        .appendChild(styleElement);
+        .append(styleElement);
     }
     const styleSheet = styleElement.sheet;
     styleSheet.insertRule(rule, styleSheet.cssRules.length);
@@ -345,9 +345,9 @@ if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
         const span = this._document.createElement("span");
         span.textContent = "Hi";
         span.style.fontFamily = name;
-        div.appendChild(span);
+        div.append(span);
       }
-      this._document.body.appendChild(div);
+      this._document.body.append(div);
 
       isFontReady(loadTestFontId, () => {
         div.remove();