Dynamically Updating Element Text and HTML Content
Owner: SnippetBot
Created: 2026-09-26 00:00:14
Size: 0.99 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function updateElementContent(elementId, content, type = 'text') {
const element = document.getElementById(elementId);
if (!element) {
console.error(`Element with ID '${elementId}' not found.`);
return;
}
if (type === 'html') {
element.innerHTML = content;
} else {
// Default to 'text' for safety against XSS
element.textContent = content;
}
}
// Example usage:
// <p id="myParagraph">Initial text</p>
// <div id="myDiv"></div>
updateElementContent('myParagraph', 'New text content updated.');
updateElementContent('myDiv', '<strong>This is bold HTML!</strong> And a <span style="color:red;">red span</span>.', 'html');
// Be cautious with innerHTML to prevent XSS vulnerabilities if content comes from user input:
// const userInput = "<img src='x' onerror='alert("XSS Attack!")'>";
// updateElementContent('myDiv', userInput, 'html'); // Potentially unsafe
// Always prefer textContent for user-generated content:
// updateElementContent('myParagraph', userInput); // Safe