En este artículo, aprenderemos cómo crear un elemento a partir de una string usando JavaScript. Esto se puede utilizar en situaciones en las que el usuario requiere elementos generados dinámicamente. Esto se puede lograr utilizando dos enfoques como se indica a continuación.
Enfoque 1: Usar el método createElement()
El método createElement() se usa para crear elementos dentro del DOM. Acepta dos parámetros, un tagName que es una string que define el tipo de elemento a crear y un objeto de opciones opcional que se puede usar para modificar cómo se crea el elemento. Cualquier elemento que se necesite se puede pasar como una string en esta función y esto devolvería el elemento especificado. Este enfoque solo se puede usar para crear un solo elemento a partir de una string.
Ejemplo: En este ejemplo, creamos un elemento de encabezado especificando la string como «h2».
HTML
<html> <body> <h1 style="color:green"> GeeksforGeeks </h1> <script> // Specify the string from which // the elements would be created var str = "h2"; var str2 = "p"; // Creating the elements var elem = document.createElement(str); var elem2 = document.createElement(str2); // Insert text in the element elem.innerText = "This is the new heading element"; elem2.innerText = "This is the new paragraph element"; // Add the element to the body document.body.appendChild(elem); document.body.appendChild(elem2); </script> </body> </html>
Producción:
Enfoque 2: Usar el método jQuery parseHTML()
El método parseHTML() de jQuery se usa para analizar una string HTML para que pueda usarse para crear elementos de acuerdo con el HTML dado. Este enfoque se puede utilizar para crear varios elementos a partir de la string.
Ejemplo: en este ejemplo, la string se especifica con varios elementos que se analizan en HTML y se agregan al cuerpo del documento.
HTML
<html>
<head>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.js">
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<script>
// Define the HTML string to be parsed
str = "<p>This <i>element</i> is created by" +
" the <b>parseHTML()</b> " +
"method in <i>jQuery</i></p>";
// Parsing the string into HTML
html = $.parseHTML(str);
// Append the element in the document
$('body').append(html);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA