Ejemplos de uso de innerHTML

Este es el contenido original del contenedor.

Code

<body>
    <h2>Ejemplos de uso de innerHTML</h2>

    <!-- Contenedor que será modificado con innerHTML -->
    <div id="contenedor" class="content">
        <p>Este es el contenido original del contenedor.</p>
<div class="clean"></div>
 </div>        
<br>
    <!-- Botones para realizar diferentes modificaciones con innerHTML -->
    <button onclick="cambiarContenido()">Cambiar Contenido</button>
    <button onclick="agregarContenido()">Agregar Contenido</button>
    <button onclick="vaciarContenido()">Vaciar Contenido</button>  

    <script>
        // Cambia completamente el contenido del contenedor
        function cambiarContenido() {
            document.getElementById('contenedor').innerHTML = `
                <h3>Nuevo Contenido</h3>
                <p>Este es un nuevo contenido generado dinámicamente con <strong>innerHTML</strong>.</p>
            `;
        }

        // Agrega contenido adicional al existente
        function agregarContenido() {
            document.getElementById('contenedor').innerHTML += `
                <p>Este contenido ha sido agregado al contenido existente. ¡Es muy fácil manipular el DOM!</p>
            `;
        }

        // Vacía el contenido del contenedor
        function vaciarContenido() {
            document.getElementById('contenedor').innerHTML = '';
        }
    </script>

</body>

Generar Código HTML Dinámicamente con innerHTML

Code

<h2>Generar Código HTML Dinámicamente con innerHTML</h2>
    
    <button onclick="generarHTML()">Generar Código HTML</button>

    <!-- Contenedor donde se generará el código HTML -->
    <div id="output"></div>

    <script>
        function generarHTML() {
            document.getElementById('output').innerHTML = `
                <h3>Se ha generado el siguiente contenido:</h3>
                <ul>
                    <li><strong>Elemento 1:</strong> Este es el primer elemento de la lista.</li>
                    <li><strong>Elemento 2:</strong> Este es el segundo elemento de la lista.</li>
                    <li><strong>Elemento 3:</strong> Este es el tercer elemento de la lista.</li>
                </ul>
                <p>Este código HTML ha sido generado dinámicamente usando <code>innerHTML</code>.</p>
            `;
        }
    </script>

Agregar Elementos HTML Dinámicamente

Code

    <h2>Agregar Elementos HTML Dinámicamente</h2>
    
    <button onclick="agregarElementos()">Agregar Elementos</button>

    <!-- Contenedor donde se agregarán los elementos -->
    <div id="content-container"></div>

    <script>
        function agregarElementos() {
            document.getElementById('content-container').innerHTML = `
                <div class="content-item">
                    <img src="https://via.placeholder.com/400x200" alt="Imagen Placeholder">
                </div>
                <div class="content-item">
                    <p>Este es un párrafo dinámicamente agregado a través de JavaScript. Puedes usar este método para agregar cualquier tipo de contenido a tu página web.</p>
                </div>
                <div class="content-item">
                    <a href="https://www.example.com" target="_blank">Visita nuestro sitio web</a>
                </div>
            `;
        }
    </script>

Generar Tabla Dinámicamente con innerHTML

Code

    <h2>Generar Tabla Dinámicamente con innerHTML</h2>
    
    <button onclick="generarTabla()">Generar Tabla</button>

    <!-- Contenedor donde se generará la tabla -->
    <div id="table-container"></div>

    <script>
        function generarTabla() {
            document.getElementById('table-container').innerHTML = `
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Juan Pérez</td>
                            <td>juan.perez@email.com</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Ana Gómez</td>
                            <td>ana.gomez@email.com</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>María López</td>
                            <td>maria.lopez@email.com</td>
                        </tr>
                    </tbody>
                </table>
            `;
        }
    </script>