Si está utilizando JavaScript vainilla, puede construir sus componentes DOM en la memoria usando document.createElement. En la mayoría de los casos, no escribirá HTML en JavaScript; en su lugar, creará elementos y los agregará al DOM.
Aquí hay un ejemplo de cómo puede agregar texto a su página usando este método:
var p = document.createElement (‘p’); // crea un elemento
- ¿Cuál es una mejor práctica de codificación, almacenar los detalles de la aplicación de Facebook en DB o código duro en el archivo de configuración de la aplicación?
- ¿Existen buenos centros de capacitación para el desarrollo web / desarrollo de aplicaciones de Android en NCR?
- WordPress Hosting: Tengo un problema con el inicio / cierre de sesión en el W3 Total Cache. ¿Qué tengo que hacer?
- Cómo transformarme de un novato absoluto a un desarrollador web profesional listo para la industria
- Cómo vender servicios de desarrollo web por primera vez
p.textContent = ‘¡Hola, mundo!’; //
¡Hola mundo!
p.className = ‘mi-clase’; //
¡Hola mundo!
// agrega nuestro elemento
al final del cuerpo
document.body.appendChild (p);
Puede agregar estos elementos a cualquier nodo DOM, no solo al cuerpo:
// selecciona un elemento para agregar
var myElement = document.querySelector (‘. my-element’);
// agregue nuestro elemento
al final de .my-element
myElement.appendChild (p);
Si necesita hacer algo más complicado que un simple elemento, se considera una mejor práctica construirlo en un DocumentFragment y luego agregarlo al DOM existente.
Entonces, eso es vanilla JS. Sin embargo, si está utilizando jQuery, puede escribir HTML en una cadena y jQuery lo convertirá en DOM por usted. Esta es una buena opción si no te sientes cómodo usando la API DOM.
var html = ‘
¡Hola mundo!
‘;
elemento var = $ (html);
$ (‘cuerpo’). append (elemento);
Usando cualquiera de estos métodos, no es necesario incrustar su JavaScript en el HTML. Simplemente puede ejecutarlo en el mismo lugar donde agrega elementos al DOM.
