如何将JavaScript ES6类/子类数据渲染为HTML？技术求助

Hey there! I see you're working through Jonas's JavaScript course (excellent pick!) and hitting a snag turning your console-based park report into visible HTML content. Let's walk through this step by step—since you're still building foundational skills, I'll explain each part clearly.

The Core Issue #

Your reportParks function currently sends all its output to the browser console. We need to adjust this logic to generate HTML markup instead, then insert that markup into your page's .test element.

Step 1: Create a Function to Generate HTML Report Content #

Instead of logging to console, we'll build a string of HTML using template literals (the backtick ` syntax Jonas covers)—this makes it easy to mix variables and HTML structure cleanly.

Here's a revised version of your report logic that returns an HTML string:

class Element { 
  constructor(name, buildYear){ 
    this.name = name; 
    this.buildYear = buildYear; 
  } 
}

class Park extends Element { 
  constructor(name, buildYear, area, numTrees) { 
    super(name, buildYear); 
    this.area = area; // km2
    this.numTrees = numTrees;
  }

  // Instead of logging, return the density string for HTML
  treeDensity() { 
    const density = this.numTrees / this.area;
    return `${this.name} has a tree density of ${density.toFixed(2)} trees per square km.`;
  } 
}

const allParks = [
  new Park('Pawnee Commons', 2012, 0.2, 215), 
  new Park('Bloomingdale Park', 1894, 2.9, 3500), 
  new Park('Marine Park', 1975, 0.4, 980)
];

function calc(arr) { 
  const sum = arr.reduce((prev, cur) => prev + cur, 0); 
  return [sum, sum / arr.length]; 
}

// New function to generate HTML report
function generateParkReportHtml(parks) {
  let html = `<h3>-------PARKS REPORT-------</h3>`;

  // 1. Tree Density Section (as a list)
  html += `<h4>Tree Densities:</h4><ul>`;
  parks.forEach(park => {
    html += `<li>${park.treeDensity()}</li>`;
  });
  html += `</ul>`;

  // 2. Average Age Calculation
  const ages = parks.map(park => new Date().getFullYear() - park.buildYear);
  const [totalAge, aveAge] = calc(ages);
  html += `<p>Our ${parks.length} parks have an average age of ${aveAge.toFixed(1)} years.</p>`;

  // 3. Park with Most Trees
  const maxTreesIndex = parks.map(park => park.numTrees).findIndex(count => count >= 1000);
  html += `<p><strong>${parks[maxTreesIndex].name}</strong> has more than 1000 trees!</p>`;

  return html;
}

Step 2: Insert the HTML into Your Page #

Now update your parksHtml function to use the generated HTML string. Also, make sure we wait for the DOM to fully load before trying to access elements (a common pitfall for beginners):

function parksHtml() {
  // Get the container element
  const container = document.querySelector('.test');
  // Generate the report HTML and insert it
  container.innerHTML = generateParkReportHtml(allParks);
}

// Wait for the DOM to be ready before running our function
document.addEventListener('DOMContentLoaded', parksHtml);

Key Concepts Explained #

• Template Literals: Using ` instead of quotes lets us write multi-line strings and embed variables directly with ${variable}—way cleaner than old-school string concatenation.
• Building HTML Strings: We start with a base string and add to it piece by piece for each section of the report.
• DOMContentLoaded: This ensures our code only runs after all page elements are loaded, so we don't get errors trying to access .test before it exists.
• toFixed(): Added this to round numbers (like density and average age) for cleaner display—Jonas covers number formatting later in the course!

Bonus Tip: Debugging Undefined Errors #

If you still see undefined when rendering, double-check:

• That your .test element exists in your HTML (make sure the class name matches exactly).
• That you're accessing array elements correctly (e.g., parks[maxTreesIndex] will only work if at least one park has ≥1000 trees—your current data does, but keep this in mind for future tests).

内容的提问来源于stack exchange，提问作者mike3640