<!
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic
Content Adder</title> <style> body { font-family: sans-serif; margin: 20px; }
#content-container { margin-top: 20px; border: 1px solid #ccc; padding:
10px; } .added-item { margin-bottom: 15px; padding: 10px; border: 1px solid #eee;
background-color: #f9f9f9; } button { padding: 8px 15px; cursor: pointer; margin-
right: 10px; } textarea, input[type="url"] { width: calc(100% - 22px); padding:
8px; margin-bottom: 10px; box-sizing: border-box; } </style> </head> <body> <h1>Add
Content to the Page</h1> <label for="contentType">Select Content Type:</label>
<select id="contentType"> <option value="text">Text</option> <option
value="image">Image URL</option> <option value="video">Video URL (YouTube/Vimeo
Embed)</option> <option value="gif">GIF URL</option> </select> <br><br> <div
id="input-controls"> <textarea id="textContent" placeholder="Enter text here"
style="display: block;"></textarea> <input type="url" id="imageUrl"
placeholder="Enter image URL" style="display: none;"> <input type="url"
id="videoUrl" placeholder="Enter YouTube or Vimeo embed URL" style="display:
none;"> <input type="url" id="gifUrl" placeholder="Enter GIF URL" style="display:
none;"> </div> <br> <button onclick="addContent()">Add Content</button> <div
id="content-container"> <h2>Added Content</h2> </div> <script> const
contentTypeSelect = [Link]('contentType'); const inputControls =
[Link]('input-controls'); const textContentInput =
[Link]('textContent'); const imageUrlInput =
[Link]('imageUrl'); const videoUrlInput =
[Link]('videoUrl'); const gifUrlInput =
[Link]('gifUrl'); const contentContainer =
[Link]('content-container');
[Link]('change', function()
{ [Link] = 'none'; [Link] = 'none';
[Link] = 'none'; [Link] = 'none'; if
([Link] === 'text') { [Link] = 'block'; } else if
([Link] === 'image') { [Link] = 'block'; } else if
([Link] === 'video') { [Link] = 'block'; } else if
([Link] === 'gif') { [Link] = 'block'; } }); function
addContent() { const contentType = [Link]; const newItem =
[Link]('div'); [Link]('added-item'); if (contentType
=== 'text') { [Link] = [Link]; [Link]
= ''; // Clear input } else if (contentType === 'image') { const img =
[Link]('img'); [Link] = [Link]; [Link] =
'100%'; [Link](img); [Link] = ''; // Clear input } else
if (contentType === 'video') { // Basic handling of embed URLs - might need more
robust parsing const iframe = [Link]('iframe'); [Link] =
[Link]; [Link] = '560'; [Link] = '315';
[Link] = true; [Link](iframe); [Link] =
''; // Clear input } else if (contentType === 'gif') { const img =
[Link]('img'); [Link] = [Link];
[Link](img); [Link] = ''; // Clear input }
[Link](newItem); } </script> </body> </html>