21 - Propiedad innerHTML
Problema:
Implementar una página que solicite el ingreso de dos URL y nos las muestre seguidamente al presionar un botón. Resolver el problema utilizando las dos metodologías, es decir con y sin la propiedad innerHTML.
pagina.html
estilos.css
funciones.js
Ejecución de la página
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prueba</title> </head> <body> <p>Ingrese url:<input type="text" id="text1" value="https://www.lavoz.com.ar" size="30"></p> <p> Ingrese url:<input type="text" id="text2" value="https://www.lanacion.com.ar" size="30"></p> <input type="button" value="Crear enlaces" id="boton1" onclick="crearEnlaces()"> <h2>Mediante innerHTML</h2> <div id="enlaces1"> </div> <h2>Creando nodos de elemento y texto</h2> <div id="enlaces2"> </div> <script src="funciones.js"></script> </body> </html>
function crearEnlaces() { //Utilizando el innerHTML let ob1 = document.getElementById("enlaces1") ob1.innerHTML = `<a href="${document.getElementById('text1').value}">Enlace 1</a> <br><a href="${document.getElementById('text2').value}">Enlace 2</a>` //Utilizando los métodos para crear nodos de elemento y texto let elemento = document.createElement('a') let puntero = document.getElementById('enlaces2') puntero.appendChild(elemento) let nodotexto = document.createTextNode('Enlace 1') elemento.appendChild(nodotexto) elemento.setAttribute('href', document.getElementById('text1').value) puntero.appendChild(document.createElement('br')) elemento = document.createElement('a') puntero.appendChild(elemento) nodotexto = document.createTextNode('Enlace 2') elemento.appendChild(nodotexto) elemento.setAttribute('href', document.getElementById('text2').value) }
No tiene disponible el navegador la capacidad de iframe
Retornar