lighthouse 9.5.0-dev.20220513 → 9.5.0-dev.20220516

package/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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.5.0-dev.20220513",
+  "version": "9.5.0-dev.20220516",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {

package/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;

package/report/renderer/crc-details-renderer.js

@@ -105,34 +105,33 @@ class CriticalRequestChainRenderer {
 
     // Construct lines and add spacers for sub requests.
     segment.treeMarkers.forEach(separator => {
-      if (separator) {
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-vert'));
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
-      } else {
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
-      }
+      const classSeparator = separator ?
+        'lh-tree-marker lh-vert' :
+        'lh-tree-marker';
+      treeMarkeEl.append(
+        dom.createElement('span', classSeparator),
+        dom.createElement('span', 'lh-tree-marker')
+      );
     });
 
-    if (segment.isLastChild) {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-up-right'));
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
-    } else {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-vert-right'));
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
-    }
+    const classLastChild = segment.isLastChild ?
+      'lh-tree-marker lh-up-right' :
+      'lh-tree-marker lh-vert-right';
+    const classHasChildren = segment.hasChildren ?
+      'lh-tree-marker lh-horiz-down' :
+      'lh-tree-marker lh-right';
 
-    if (segment.hasChildren) {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-horiz-down'));
-    } else {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
-    }
+    treeMarkeEl.append(
+      dom.createElement('span', classLastChild),
+      dom.createElement('span', 'lh-tree-marker lh-right'),
+      dom.createElement('span', classHasChildren)
+    );
 
     // Fill in url, host, and request size information.
     const url = segment.node.request.url;
     const linkEl = detailsRenderer.renderTextURL(url);
     const treevalEl = dom.find('.lh-crc-node__tree-value', chainEl);
-    treevalEl.appendChild(linkEl);
+    treevalEl.append(linkEl);
 
     if (!segment.hasChildren) {
       const {startTime, endTime, transferSize} = segment.node.request;
@@ -141,8 +140,7 @@ class CriticalRequestChainRenderer {
       const span2 = dom.createElement('span', 'lh-crc-node__chain-duration');
       span2.textContent = Util.i18n.formatBytesToKiB(transferSize, 0.01);
 
-      treevalEl.appendChild(span);
-      treevalEl.appendChild(span2);
+      treevalEl.append(span, span2);
     }
 
     return chainEl;
@@ -158,7 +156,7 @@ class CriticalRequestChainRenderer {
    * @param {DetailsRenderer} detailsRenderer
    */
   static buildTree(dom, tmpl, segment, elem, details, detailsRenderer) {
-    elem.appendChild(CRCRenderer.createChainNode(dom, segment, detailsRenderer));
+    elem.append(CRCRenderer.createChainNode(dom, segment, detailsRenderer));
     if (segment.node.children) {
       for (const key of Object.keys(segment.node.children)) {
         const childSegment = CRCRenderer.createSegment(segment.node.children, key,

package/report/renderer/details-renderer.js

@@ -119,12 +119,12 @@ export class DetailsRenderer {
     }
 
     const element = this._dom.createElement('div', 'lh-text__url');
-    element.appendChild(this._renderLink({text: displayedPath, url}));
+    element.append(this._renderLink({text: displayedPath, url}));
 
     if (displayedHost) {
       const hostElem = this._renderText(displayedHost);
       hostElem.classList.add('lh-text__url-host');
-      element.appendChild(hostElem);
+      element.append(hostElem);
     }
 
     if (title) {
@@ -397,7 +397,7 @@ export class DetailsRenderer {
 
       if (valueElement) {
         const classes = `lh-table-column--${heading.valueType}`;
-        this._dom.createChildOf(rowElem, 'td', classes).appendChild(valueElement);
+        this._dom.createChildOf(rowElem, 'td', classes).append(valueElement);
       } else {
         // Empty cell is rendered for a column if:
         // - the pair is null
@@ -452,7 +452,7 @@ export class DetailsRenderer {
       const classes = `lh-table-column--${valueType}`;
       const labelEl = this._dom.createElement('div', 'lh-text');
       labelEl.textContent = heading.label;
-      this._dom.createChildOf(theadTrElem, 'th', classes).appendChild(labelEl);
+      this._dom.createChildOf(theadTrElem, 'th', classes).append(labelEl);
     }
 
     const tbodyElem = this._dom.createChildOf(tableElem, 'tbody');
@@ -495,13 +495,13 @@ export class DetailsRenderer {
     if (item.nodeLabel) {
       const nodeLabelEl = this._dom.createElement('div');
       nodeLabelEl.textContent = item.nodeLabel;
-      element.appendChild(nodeLabelEl);
+      element.append(nodeLabelEl);
     }
     if (item.snippet) {
       const snippetEl = this._dom.createElement('div');
       snippetEl.classList.add('lh-node__snippet');
       snippetEl.textContent = item.snippet;
-      element.appendChild(snippetEl);
+      element.append(snippetEl);
     }
     if (item.selector) {
       element.title = item.selector;

package/report/renderer/dom.js

@@ -97,7 +97,7 @@ export class DOM {
    */
   createChildOf(parentElem, elementName, className) {
     const element = this.createElement(elementName, className);
-    parentElem.appendChild(element);
+    parentElem.append(element);
     return element;
   }
 
@@ -135,7 +135,7 @@ export class DOM {
     for (const segment of Util.splitMarkdownLink(text)) {
       if (!segment.isLink) {
         // Plain text segment.
-        element.appendChild(this._document.createTextNode(segment.text));
+        element.append(this._document.createTextNode(segment.text));
         continue;
       }
 
@@ -153,7 +153,7 @@ export class DOM {
       a.target = '_blank';
       a.textContent = segment.text;
       this.safelySetHref(a, url.href);
-      element.appendChild(a);
+      element.append(a);
     }
 
     return element;
@@ -210,9 +210,9 @@ export class DOM {
       if (segment.isCode) {
         const pre = this.createElement('code');
         pre.textContent = segment.text;
-        element.appendChild(pre);
+        element.append(pre);
       } else {
-        element.appendChild(this._document.createTextNode(segment.text));
+        element.append(this._document.createTextNode(segment.text));
       }
     }
 
@@ -295,7 +295,7 @@ export class DOM {
     const a = this.createElement('a');
     a.download = filename;
     this.safelySetBlobHref(a, blob);
-    this._document.body.appendChild(a); // Firefox requires anchor to be in the DOM.
+    this._document.body.append(a); // Firefox requires anchor to be in the DOM.
     a.click();
 
     // cleanup.

package/report/renderer/element-screenshot-renderer.js

@@ -186,7 +186,7 @@ export class ElementScreenshotRenderer {
         overlay.remove();
         return;
       }
-      overlay.appendChild(screenshotElement);
+      overlay.append(screenshotElement);
       overlay.addEventListener('click', () => overlay.remove());
     });
   }

package/report/renderer/performance-category-renderer.js

@@ -39,7 +39,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     valueEl.textContent = audit.result.displayValue || '';
 
     const descriptionEl = this.dom.find('.lh-metric__description', tmpl);
-    descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description));
+    descriptionEl.append(this.dom.convertMarkdownLinkSnippets(audit.result.description));
 
     if (audit.result.scoreDisplayMode === 'error') {
       descriptionEl.textContent = '';
@@ -179,7 +179,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     const strings = Util.i18n.strings;
     const element = this.dom.createElement('div', 'lh-category');
     element.id = category.id;
-    element.appendChild(this.renderCategoryHeader(category, groups, options));
+    element.append(this.renderCategoryHeader(category, groups, options));
 
     // Metrics.
     const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
@@ -204,7 +204,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       const metricsBoxesEl = this.dom.createElement('div', 'lh-metrics-container');
       metricsGroupEl.insertBefore(metricsBoxesEl, metricsFooterEl);
       metricAudits.forEach(item => {
-        metricsBoxesEl.appendChild(this._renderMetric(item));
+        metricsBoxesEl.append(this._renderMetric(item));
       });
 
       // Only add the disclaimer with the score calculator link if the category was rendered with a score gauge.
@@ -212,7 +212,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         const descriptionEl = this.dom.find('.lh-category-header__description', element);
         const estValuesEl = this.dom.createChildOf(descriptionEl, 'div', 'lh-metrics__disclaimer');
         const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer);
-        estValuesEl.appendChild(disclaimerEl);
+        estValuesEl.append(disclaimerEl);
 
         // Add link to score calculator.
         const calculatorLink = this.dom.createChildOf(estValuesEl, 'a', 'lh-calclink');
@@ -222,7 +222,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       }
 
       metricsGroupEl.classList.add('lh-audit-group--metrics');
-      element.appendChild(metricsGroupEl);
+      element.append(metricsGroupEl);
     }
 
     // Filmstrip
@@ -232,7 +232,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     if (thumbnailResult?.details) {
       timelineEl.id = thumbnailResult.id;
       const filmstripEl = this.detailsRenderer.render(thumbnailResult.details);
-      filmstripEl && timelineEl.appendChild(filmstripEl);
+      filmstripEl && timelineEl.append(filmstripEl);
     }
 
     // Opportunities
@@ -266,7 +266,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       opportunityAudits.forEach(item =>
         groupEl.insertBefore(this._renderOpportunity(item, scale), footerEl));
       groupEl.classList.add('lh-audit-group--load-opportunities');
-      element.appendChild(groupEl);
+      element.append(groupEl);
     }
 
     // Diagnostics
@@ -283,7 +283,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       const [groupEl, footerEl] = this.renderAuditGroup(groups['diagnostics']);
       diagnosticAudits.forEach(item => groupEl.insertBefore(this.renderAudit(item), footerEl));
       groupEl.classList.add('lh-audit-group--diagnostics');
-      element.appendChild(groupEl);
+      element.append(groupEl);
     }
 
     // Passed audits
@@ -297,7 +297,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       groupDefinitions: groups,
     };
     const passedElem = this.renderClump('passed', clumpOpts);
-    element.appendChild(passedElem);
+    element.append(passedElem);
 
     // Budgets
     /** @type {Array<Element>} */
@@ -317,7 +317,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       const [groupEl, footerEl] = this.renderAuditGroup(groups.budgets);
       budgetTableEls.forEach(table => groupEl.insertBefore(table, footerEl));
       groupEl.classList.add('lh-audit-group--budgets');
-      element.appendChild(groupEl);
+      element.append(groupEl);
     }
 
     return element;

package/report/renderer/pwa-category-renderer.js

@@ -27,7 +27,7 @@ export class PwaCategoryRenderer extends CategoryRenderer {
   render(category, groupDefinitions = {}) {
     const categoryElem = this.dom.createElement('div', 'lh-category');
     categoryElem.id = category.id;
-    categoryElem.appendChild(this.renderCategoryHeader(category, groupDefinitions));
+    categoryElem.append(this.renderCategoryHeader(category, groupDefinitions));
 
     const auditRefs = category.auditRefs;
 
@@ -35,13 +35,13 @@ export class PwaCategoryRenderer extends CategoryRenderer {
     // all put in a top-level clump that isn't expandable/collapsible.
     const regularAuditRefs = auditRefs.filter(ref => ref.result.scoreDisplayMode !== 'manual');
     const auditsElem = this._renderAudits(regularAuditRefs, groupDefinitions);
-    categoryElem.appendChild(auditsElem);
+    categoryElem.append(auditsElem);
 
     // Manual audits are still in a manual clump.
     const manualAuditRefs = auditRefs.filter(ref => ref.result.scoreDisplayMode === 'manual');
     const manualElem = this.renderClump('manual',
       {auditRefs: manualAuditRefs, description: category.manualDescription});
-    categoryElem.appendChild(manualElem);
+    categoryElem.append(manualElem);
 
     return categoryElem;
   }

package/report/renderer/report-renderer.js

@@ -70,7 +70,7 @@ export class ReportRenderer {
     const report = Util.prepareReportResult(lhr);
 
     this._dom.rootEl.textContent = ''; // Remove previous report.
-    this._dom.rootEl.appendChild(this._renderReport(report));
+    this._dom.rootEl.append(this._renderReport(report));
 
     return this._dom.rootEl;
   }
@@ -178,11 +178,13 @@ export class ReportRenderer {
     const message = this._dom.find('.lh-warnings__msg', container);
     message.textContent = Util.i18n.strings.toplevelWarningsMessage;
 
-    const warnings = this._dom.find('ul', container);
+    const warnings = [];
     for (const warningString of report.runWarnings) {
-      const warning = warnings.appendChild(this._dom.createElement('li'));
-      warning.appendChild(this._dom.convertMarkdownLinkSnippets(warningString));
+      const warning = this._dom.createElement('li');
+      warning.append(this._dom.convertMarkdownLinkSnippets(warningString));
+      warnings.push(warning);
     }
+    this._dom.find('ul', container).append(...warnings);
 
     return container;
   }
@@ -275,11 +277,11 @@ export class ReportRenderer {
     };
 
     const headerContainer = this._dom.createElement('div');
-    headerContainer.appendChild(this._renderReportHeader());
+    headerContainer.append(this._renderReportHeader());
 
     const reportContainer = this._dom.createElement('div', 'lh-container');
     const reportSection = this._dom.createElement('div', 'lh-report');
-    reportSection.appendChild(this._renderReportWarnings(report));
+    reportSection.append(this._renderReportWarnings(report));
 
     let scoreHeader;
     const isSoloCategory = Object.keys(report.categories).length === 1;
@@ -296,23 +298,23 @@ export class ReportRenderer {
       const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
       scoreHeader.append(
         ...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
-      scoresContainer.appendChild(scoreHeader);
-      scoresContainer.appendChild(scoreScale);
+      scoresContainer.append(scoreHeader, scoreScale);
 
       const stickyHeader = this._dom.createElement('div', 'lh-sticky-header');
       stickyHeader.append(
         ...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
-      reportContainer.appendChild(stickyHeader);
+      reportContainer.append(stickyHeader);
     }
 
-    const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
+    const categories = this._dom.createElement('div', 'lh-categories');
+    reportSection.append(categories);
     const categoryOptions = {gatherMode: report.gatherMode};
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
       // .lh-category-wrapper is full-width and provides horizontal rules between categories.
       // .lh-category within has the max-width: var(--report-content-max-width);
       const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
-      wrapper.appendChild(renderer.render(
+      wrapper.append(renderer.render(
         category,
         report.categoryGroups,
         categoryOptions
@@ -327,13 +329,12 @@ export class ReportRenderer {
     }
 
     if (!this._opts.omitTopbar) {
-      reportFragment.appendChild(this._renderReportTopbar(report));
+      reportFragment.append(this._renderReportTopbar(report));
     }
 
-    reportFragment.appendChild(reportContainer);
-    reportContainer.appendChild(headerContainer);
-    reportContainer.appendChild(reportSection);
-    reportSection.appendChild(this._renderReportFooter(report));
+    reportFragment.append(reportContainer);
+    reportSection.append(this._renderReportFooter(report));
+    reportContainer.append(headerContainer, reportSection);
 
     if (fullPageScreenshot) {
       ElementScreenshotRenderer.installFullPageScreenshot(

package/report/renderer/snippet-renderer.js

@@ -128,7 +128,7 @@ export class SnippetRenderer {
     // access the full element detail. Just being able to see the outer HTML isn't very useful.
     if (details.node && dom.isDevTools()) {
       const nodeContainer = dom.find('.lh-snippet__node', header);
-      nodeContainer.appendChild(detailsRenderer.renderNode(details.node));
+      nodeContainer.append(detailsRenderer.renderNode(details.node));
     }
 
     return header;
@@ -163,7 +163,7 @@ export class SnippetRenderer {
     const lineContent = content + (truncated ? '…' : '');
     const lineContentEl = dom.find('.lh-snippet__line code', contentLine);
     if (contentType === LineContentType.MESSAGE) {
-      lineContentEl.appendChild(dom.convertMarkdownLinkSnippets(lineContent));
+      lineContentEl.append(dom.convertMarkdownLinkSnippets(lineContent));
     } else {
       lineContentEl.textContent = lineContent;
     }