Dynamic HTML Element Generator

This challenge asks you to build a JavaScript function that dynamically generates HTML elements based on a provided configuration. This is a useful skill for creating reusable components, building dynamic user interfaces, and simplifying the process of generating repetitive HTML structures. The function should take a configuration object as input and return a string containing the generated HTML.

Problem Description

You need to create a JavaScript function called generateHtml that takes a configuration object as input and returns a string representing the generated HTML element. The configuration object will define the type of element, its attributes, and its content.

Key Requirements:

• Element Type: The configuration object must specify the type of HTML element to generate (e.g., "div", "p", "span", "button", "input", "a").
• Attributes: The configuration object can optionally include an attributes object. This object will contain key-value pairs representing HTML attributes for the element (e.g., { id: "myElement", class: "highlight" }).
• Content: The configuration object must specify the content of the element. This can be a string representing the text content or an array of strings/HTML snippets to be concatenated as the element's content.
• Nested Elements: The content can also be an array of configuration objects, allowing for nested elements to be generated recursively.
• Self-Closing Tags: For elements like <br>, <hr>, and <img>, the function should generate self-closing tags.

Expected Behavior:

The generateHtml function should return a valid HTML string based on the provided configuration. The generated HTML should be well-formed and properly escaped to prevent XSS vulnerabilities.

Edge Cases to Consider:

• Invalid element types (e.g., a type that doesn't exist in HTML). Handle these gracefully (e.g., return an error message or a default element).
• Empty content.
• Nested elements with complex attributes and content.
• Special characters in the content that need to be properly escaped.
• Handling of boolean attributes (e.g., checked, disabled).

Examples

Example 1:

Input: { type: "div", attributes: { id: "container", class: "main" }, content: "Hello, world!" }
Output: '<div id="container" class="main">Hello, world!</div>'
Explanation: A simple div element with an ID and class attribute and the text "Hello, world!" as content.

Example 2:

Input: { type: "button", attributes: { onclick: "alert('Clicked!')" }, content: "Click Me" }
Output: '<button onclick="alert(\'Clicked!\')">Click Me</button>'
Explanation: A button element with an onclick attribute and the text "Click Me" as content. Note the escaped single quotes within the attribute value.

Example 3:

Input: { type: "ul", content: [ { type: "li", content: "Item 1" }, { type: "li", content: "Item 2" } ] }
Output: '<ul><li>Item 1</li><li>Item 2</li></ul>'
Explanation: A nested unordered list with two list items.

Example 4:

Input: { type: "img", attributes: { src: "image.jpg", alt: "My Image" }, content: "" }
Output: '<img src="image.jpg" alt="My Image" />'
Explanation: An image element with src and alt attributes.  It's a self-closing tag.

Constraints

• The function must be able to handle a maximum nesting depth of 5 for nested elements.
• The total length of the generated HTML string should not exceed 10,000 characters.
• All attribute values must be properly escaped to prevent XSS vulnerabilities.
• The function should be reasonably performant, avoiding unnecessary string concatenations.

Notes

• Consider using a template literal (backticks) for easier string construction.
• You'll need to implement a mechanism for escaping special characters in the content.
• Think about how to handle different types of attributes (e.g., boolean attributes).
• Recursion is a good approach for handling nested elements.
• Error handling is important – consider what to do if the input is invalid. Returning an error message is preferable to crashing.
• Focus on creating a robust and reusable function that can handle a variety of HTML element configurations.