misc: replace appendChild with append (#13995)

clients/extension/scripts/popup.js

@@ -53,10 +53,11 @@ function createOptionItem(text, id, isChecked) {
   }
 
   const label = document.createElement('label');
-  label.appendChild(input);
-  label.appendChild(document.createElement('span')).textContent = text;
+  const span = document.createElement('span');
+  span.textContent = text;
+  label.append(input, span);
   const listItem = document.createElement('li');
-  listItem.appendChild(label);
+  listItem.append(label);
 
   return listItem;
 }
@@ -87,11 +88,11 @@ function generateOptionsList(settings) {
 
   SettingsController.DEFAULT_CATEGORIES.forEach(category => {
     const isChecked = settings.selectedCategories.includes(category.id);
-    frag.appendChild(createOptionItem(category.title, category.id, isChecked));
+    frag.append(createOptionItem(category.title, category.id, isChecked));
   });
 
   const optionsCategoriesList = find('.options__categories');
-  optionsCategoriesList.appendChild(frag);
+  optionsCategoriesList.append(frag);
 }
 
 function fillDevToolsShortcut() {

flow-report/src/util.ts

@@ -137,7 +137,7 @@ function useExternalRenderer<T extends Element>(
     if (!ref.current) return;
 
     const root = renderCallback();
-    ref.current.appendChild(root);
+    ref.current.append(root);
 
     return () => {
       if (ref.current?.contains(root)) ref.current.removeChild(root);

lighthouse-cli/test/fixtures/byte-efficiency/tester.html

@@ -21,15 +21,14 @@
     if (used) {
       const div = document.createElement('div');
       div.classList.add(className);
-      document.body.appendChild(div);
+      document.body.append(div);
     }
     sizeInBytes -= rule.length * 0.2; // 1 byte per character, GZip estimate is 20% for Stylesheets
   }
 
   const style = document.createElement('style');
-  const textContent = firstContent + data.join('\n');
-  style.appendChild(document.createTextNode(textContent));
-  document.head.appendChild(style);
+  style.append(firstContent + data.join('\n'));
+  document.head.append(style);
 }
 
 function longTask(length = 75) {
@@ -43,7 +42,7 @@
 // Lazily load the image
 setTimeout(() => {
   const template = document.getElementById('lazily-loaded-image');
-  document.body.appendChild(template.content.cloneNode(true));
+  document.body.append(template.content.cloneNode(true));
 }, 7000);
 </script>
 <style>

lighthouse-cli/test/fixtures/delayed-fcp.html

@@ -10,7 +10,7 @@
     setTimeout(() => {
       const textEl = document.createElement('span');
       textEl.textContent = 'Hello, World!';
-      document.body.appendChild(textEl);
+      document.body.append(textEl);
     }, 6000);
   </script>
 </body>

lighthouse-cli/test/fixtures/delayed-lcp.html

@@ -10,7 +10,7 @@
     fetch('/404?delay=7000').then(() => {
       const imageEl = document.createElement('img');
       imageEl.src = '/byte-efficiency/lighthouse-480x320.jpg?delay=7000';
-      document.body.appendChild(imageEl);
+      document.body.append(imageEl);
     })
   </script>
 </body>

lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html

@@ -131,7 +131,7 @@
   const shadowRoot = shadowRootContainer.attachShadow({mode: 'open'});
   for (let i = 0; i < 100; i++) {
     const span = document.createElement('span');
-    shadowRoot.appendChild(span);
+    shadowRoot.append(span);
   }
 </script>
 
@@ -239,7 +239,7 @@ <h2>Do better web tester page</h2>
 <script>
 function stampTemplate(id, location) {
   const template = document.querySelector('#' + id);
-  location.appendChild(template.content.cloneNode(true));
+  location.append(template.content.cloneNode(true));
 }
 
 function dateNowTest() {
@@ -378,7 +378,7 @@ <h2>Do better web tester page</h2>
   const blob = new Blob(['fake'])
   const img = document.createElement('img');
   img.src = URL.createObjectURL(blob);
-  document.body.appendChild(img); // PASS
+  document.body.append(img); // PASS
 }
 
 function noUnloadListenersTest() {
@@ -461,7 +461,7 @@ <h2>Do better web tester page</h2>
     fs.root.getFile(`empty-${Math.random()}.png`, {create: true, exclusive: true}, function (fileEntry) {
       const img = document.createElement('img');
       img.src = fileEntry.toURL();
-      document.body.appendChild(img);
+      document.body.append(img);
     }, console.error);
   }
 

lighthouse-cli/test/fixtures/perf/level-3.js

@@ -9,4 +9,4 @@
 const dummyDiv = document.createElement('div');
 dummyDiv.innerHTML = 'Hello!';
 
-document.body.appendChild(dummyDiv);
+document.body.append(dummyDiv);

lighthouse-cli/test/fixtures/perf/preload_tester.js

@@ -18,13 +18,13 @@ setTimeout(() => {
   const link = document.createElement('link');
   link.rel = 'stylesheet';
   link.href = 'https://fonts.googleapis.com/css?family=Ranchers&display=block';
-  document.head.appendChild(link);
+  document.head.append(link);
 
   link.onload = () => {
     // Make sure LCP is waiting on the network so the above resources are considered important.
     const lcpElement = document.createElement('div');
     lcpElement.style.fontFamily = 'Ranchers';
     lcpElement.textContent = 'Here is some really tall text!'.repeat(50)
-    document.body.appendChild(lcpElement);
+    document.body.append(lcpElement);
   };
 }, 300);

lighthouse-core/test/fixtures/fraggle-rock/snapshot-basic/onclick.html

@@ -27,7 +27,7 @@
     function addTemplate(selector) {
       /** @type {HTMLTemplateElement} */
       const template = document.querySelector(selector);
-      document.body.appendChild(template.content.cloneNode(true));
+      document.body.append(template.content.cloneNode(true));
     }
 
     document.addEventListener('click', () => {

lighthouse-core/test/lib/page-functions-test.js

@@ -167,7 +167,7 @@ describe('Page Functions', () => {
       parentEl.className = 'dont-use-this';
       const childEl = document.createElement('div');
       childEl.className = 'child';
-      parentEl.appendChild(childEl);
+      parentEl.append(childEl);
       assert.equal(pageFunctions.getNodeSelector(childEl), 'div#wrapper > div.child');
     });
   });
@@ -183,7 +183,7 @@ describe('Page Functions', () => {
       const el = document.createElement('div');
       const childEl = document.createElement('div');
       childEl.setAttribute('aria-label', 'Something');
-      el.appendChild(childEl);
+      el.append(childEl);
       assert.equal(pageFunctions.getNodeLabel(el), 'Something');
     });
 
@@ -204,7 +204,7 @@ describe('Page Functions', () => {
     it('Returns null if there is no better label', () => {
       const el = document.createElement('div');
       const childEl = document.createElement('span');
-      el.appendChild(childEl);
+      el.append(childEl);
       assert.equal(pageFunctions.getNodeLabel(el), null);
     });
   });
@@ -225,8 +225,9 @@ describe('Page Functions', () => {
 
     it('returns node path through shadow root', () => {
       const el = document.createElement('div');
-      const main = el.appendChild(document.createElement('main'));
-      const shadowRoot = main.attachShadow({mode: 'open'});
+      const mainEl = document.createElement('main');
+      el.append(mainEl);
+      const shadowRoot = mainEl.attachShadow({mode: 'open'});
       const sectionEl = document.createElement('section');
       const img = document.createElement('img');
       img.src = '#';
@@ -245,7 +246,7 @@ describe('Page Functions', () => {
       const childEl = document.createElement('p');
       childEl.id = 'child';
       childEl.className = 'child-el';
-      el.appendChild(childEl);
+      el.append(childEl);
       const {nodeLabel} = pageFunctions.getNodeDetails(el);
       assert.equal(nodeLabel, 'div#parent');
     });

report/renderer/category-renderer.js

@@ -72,9 +72,9 @@ export class CategoryRenderer {
     }
 
     const titleEl = this.dom.find('.lh-audit__title', auditEl);
-    titleEl.appendChild(this.dom.convertMarkdownCodeSnippets(audit.result.title));
+    titleEl.append(this.dom.convertMarkdownCodeSnippets(audit.result.title));
     const descEl = this.dom.find('.lh-audit__description', auditEl);
-    descEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description));
+    descEl.append(this.dom.convertMarkdownLinkSnippets(audit.result.description));
 
     for (const relevantMetric of audit.relevantMetrics || []) {
       const adornEl = this.dom.createChildOf(descEl, 'span', 'lh-audit__adorn');
@@ -84,19 +84,16 @@ export class CategoryRenderer {
 
     if (audit.stackPacks) {
       audit.stackPacks.forEach(pack => {
-        const packElm = this.dom.createElement('div');
-        packElm.classList.add('lh-audit__stackpack');
-
-        const packElmImg = this.dom.createElement('img');
-        packElmImg.classList.add('lh-audit__stackpack__img');
+        const packElmImg = this.dom.createElement('img', 'lh-audit__stackpack__img');
         packElmImg.src = pack.iconDataURL;
         packElmImg.alt = pack.title;
-        packElm.appendChild(packElmImg);
 
-        packElm.appendChild(this.dom.convertMarkdownLinkSnippets(pack.description));
+        const snippets = this.dom.convertMarkdownLinkSnippets(pack.description);
+        const packElm = this.dom.createElement('div', 'lh-audit__stackpack');
+        packElm.append(packElmImg, snippets);
 
         this.dom.find('.lh-audit__stackpacks', auditEl)
-          .appendChild(packElm);
+          .append(packElm);
       });
     }
 
@@ -105,12 +102,12 @@ export class CategoryRenderer {
       const elem = this.detailsRenderer.render(audit.result.details);
       if (elem) {
         elem.classList.add('lh-details');
-        header.appendChild(elem);
+        header.append(elem);
       }
     }
 
     // Add chevron SVG to the end of the summary
-    this.dom.find('.lh-chevron-container', auditEl).appendChild(this._createChevron());
+    this.dom.find('.lh-chevron-container', auditEl).append(this._createChevron());
     this._setRatingClass(auditEl, audit.result.score, scoreDisplayMode);
 
     if (audit.result.scoreDisplayMode === 'error') {
@@ -132,7 +129,7 @@ export class CategoryRenderer {
     const warningsEl = this.dom.createChildOf(summaryEl, 'div', 'lh-warnings');
     this.dom.createChildOf(warningsEl, 'span').textContent = strings.warningHeader;
     if (warnings.length === 1) {
-      warningsEl.appendChild(this.dom.createTextNode(warnings.join('')));
+      warningsEl.append(this.dom.createTextNode(warnings.join('')));
     } else {
       const warningsUl = this.dom.createChildOf(warningsEl, 'ul');
       for (const warning of warnings) {
@@ -207,11 +204,11 @@ export class CategoryRenderer {
 
     const gaugeContainerEl = this.dom.find('.lh-score__gauge', component);
     const gaugeEl = this.renderCategoryScore(category, groupDefinitions, options);
-    gaugeContainerEl.appendChild(gaugeEl);
+    gaugeContainerEl.append(gaugeEl);
 
     if (category.description) {
       const descEl = this.dom.convertMarkdownLinkSnippets(category.description);
-      this.dom.find('.lh-category-header__description', component).appendChild(descEl);
+      this.dom.find('.lh-category-header__description', component).append(descEl);
     }
 
     return component;
@@ -230,13 +227,13 @@ export class CategoryRenderer {
 
     this.dom.createChildOf(auditGroupHeader, 'span', 'lh-audit-group__title')
       .textContent = group.title;
-    groupEl.appendChild(auditGroupHeader);
+    groupEl.append(auditGroupHeader);
 
     let footerEl = null;
     if (group.description) {
       footerEl = this.dom.convertMarkdownLinkSnippets(group.description);
       footerEl.classList.add('lh-audit-group__description', 'lh-audit-group__footer');
-      groupEl.appendChild(footerEl);
+      groupEl.append(footerEl);
     }
 
     return [groupEl, footerEl];
@@ -300,7 +297,7 @@ export class CategoryRenderer {
   renderUnexpandableClump(auditRefs, groupDefinitions) {
     const clumpElement = this.dom.createElement('div');
     const elements = this._renderGroupedAudits(auditRefs, groupDefinitions);
-    elements.forEach(elem => clumpElement.appendChild(elem));
+    elements.forEach(elem => clumpElement.append(elem));
     return clumpElement;
   }
 
@@ -334,7 +331,7 @@ export class CategoryRenderer {
     if (description) {
       const descriptionEl = this.dom.convertMarkdownLinkSnippets(description);
       descriptionEl.classList.add('lh-audit-group__description', 'lh-audit-group__footer');
-      el.appendChild(descriptionEl);
+      el.append(descriptionEl);
     }
 
     this.dom.find('.lh-clump-toggletext--show', el).textContent = Util.i18n.strings.show;
@@ -426,7 +423,7 @@ export class CategoryRenderer {
     const content = this.dom.find('.lh-fraction__content', tmpl);
     const text = this.dom.createElement('span');
     text.textContent = `${numPassed}/${numPassableAudits}`;
-    content.appendChild(text);
+    content.append(text);
 
     let rating = Util.calculateRating(fraction);
 
@@ -530,7 +527,7 @@ export class CategoryRenderer {
   render(category, groupDefinitions = {}, options) {
     const element = this.dom.createElement('div', 'lh-category');
     element.id = category.id;
-    element.appendChild(this.renderCategoryHeader(category, groupDefinitions, options));
+    element.append(this.renderCategoryHeader(category, groupDefinitions, options));
 
     // Top level clumps for audits, in order they will appear in the report.
     /** @type {Map<TopLevelClumpId, Array<LH.ReportResult.AuditRef>>} */
@@ -563,13 +560,13 @@ export class CategoryRenderer {
       if (clumpId === 'failed') {
         const clumpElem = this.renderUnexpandableClump(auditRefs, groupDefinitions);
         clumpElem.classList.add(`lh-clump--failed`);
-        element.appendChild(clumpElem);
+        element.append(clumpElem);
         continue;
       }
 
       const description = clumpId === 'manual' ? category.manualDescription : undefined;
       const clumpElem = this.renderClump(clumpId, {auditRefs, description});
-      element.appendChild(clumpElem);
+      element.append(clumpElem);
     }
 
     return element;