JS Output

JavaScript Output: Displaying Data & Output Methods

JavaScript provides multiple mechanisms to output data for user display, debugging, or document manipulation. Choosing the appropriate output method ensures DOM security, readable logs, and seamless user interaction.

JavaScript Output Flow

flowchart LR
    Data["JavaScript Data / Variables"] --> Choice{"Output Destination?"}
    Choice -- "User Interface DOM" --> DOM["innerHTML / textContent"]
    Choice -- "Developer Console" --> Console["console.log / console.table"]
    Choice -- "Browser Dialog" --> Alert["window.alert()"]
    Choice -- "Document Stream" --> Write["document.write() (Legacy)"]

Output Methods Comparison

Practical Code Example

// Demonstrating modern output techniques

// 1. Developer Console Outputs
const userList = [
  { id: 1, username: "alex99", role: "admin" },
  { id: 2, username: "sarah_k", role: "editor" }
];
console.log("Standard Console Log:", userList);
console.table(userList); // Formatted tabular view

// 2. Safe DOM Manipulation via textContent
const heading = document.createElement("h2");
heading.textContent = "Safe Output via textContent: <script>alert('XSS')</script>";
document.body.appendChild(heading);

// 3. Injecting HTML via innerHTML
const cardContainer = document.createElement("div");
const safeUserRole = "admin";
cardContainer.innerHTML = `
  <div class="user-card">
    <h3>User Details</h3>
    <p>Role: <strong>${safeUserRole}</strong></p>
  </div>
`;
document.body.appendChild(cardContainer);

// 4. Modal Alert (Uncomment to test blocking modal)
// window.alert("Operation completed successfully!");

Best Practices & Gotchas

• Never Use document.write() After Page Load: Calling document.write() after an HTML document has finished loading will completely overwrite the entire page.
• Sanitize Before Using innerHTML: If rendering user input via innerHTML, sanitize strings to prevent Cross-Site Scripting (XSS) security vulnerabilities. Use textContent for plain text.
• Use console.table() for Structured Arrays: When logging lists of objects, console.table() produces a clean, filterable UI in browser devtools.

Self-Check Challenge

Write a code snippet that updates an element with id="status-output" to display "Connection Status: Active" using textContent.