const plainTextElement = document.getElementById('plainTextDisplay');
const htmlContentElement = document.getElementById('htmlContentDisplay');

// Use textContent to set plain text. This is safer as it automatically escapes HTML.
// Prevents XSS attacks if content comes from user input or untrusted sources.
const userProvidedText = 'Hello <script>alert("XSS!")</script> World!';
plainTextElement.textContent = 'Plain text updated: ' + userProvidedText;
console.log('textContent result:', plainTextElement.textContent);

// Use innerHTML to set content that includes HTML tags.
// ONLY use this if you trust the source of the HTML content.
const richContent = 'This is an <strong>important</strong> message with <em>styled</em> text.';
htmlContentElement.innerHTML = 'HTML content updated: ' + richContent;
console.log('innerHTML result:', htmlContentElement.innerHTML);

// Example HTML structure (for context):
// <div id="plainTextDisplay">Original plain text</div>
// <div id="htmlContentDisplay">Original HTML content</div>