¿Cómo combinar múltiples elementos y agregar el resultado en un div usando JavaScript?

Combinar múltiples elementos y agregar elementos a DOM es un proceso crucial, se convertiría en un proceso lento. Si no se maneja correctamente, como desarrollador, deberíamos saber cómo actualizar el DOM de manera efectiva. Las siguientes son las tres formas de agregar elementos HTML a DOM. Los siguientes métodos están en orden decreciente de complejidad de tiempo.

Utilice el método de adición de jQuery.
Agregar elementos usando strings en lugar de Nodes.
Use JavaScript puro para crear y agregar node.

Para esta guía, asumiremos que nuestra tarea es agregar 10 elementos de lista al cuerpo de una página web.

Enfoque 1: este enfoque utiliza el método jQuery append() para colocar el elemento DOM que desea insertar.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Appending new elements to document body .
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script>
        var Elements = ["C", "C++", "Java", "Python",
                        "R", "Perl", "C#", "PHP"];
  
        function AddNewElementsByJquery() {
            for (var i = 0; i < Elements.length; i++) {
                $("#Languages")
                .append('<li>' + Elements[i] + '</li>');
            }
        }
    </script>
</head>
  
<body>
    <button onclick="AddNewElementsByJquery()">
        Append Elements Using jQuery
    </button>
    <div id="LanguagesDiv">
        <ul id="Languages">
            <li>JavaScript</li>
        </ul>
    </div>
</body>
  
</html>       

producción:

Enfoque 2: Agregar elementos usando strings en lugar de Nodes. Declare una string JavaScript vacía para almacenar elementos HTML en esa string. Siga agregando nuevos elementos a una string. Agregue esa string al documento o algún Node DOM ya existente usando el método append() de jQuery .

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Appending new elements to document body .
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script>
        var Elements = ["C", "C++", "Java", "Python",
                        "R", "Perl", "C#", "PHP"];
  
        function AddNewElementUsingString() {
            var NodesString = "";
            for (var i = 0; i < Elements.length; i++) {
                NodesString += "<li>" + Elements[i] + "</li>";
            }
            var UlElement = document.getElementById('Languages');
            $("#Languages").append(NodesString);
        }
    </script>
</head>
  
<body>
    <button onclick="AddNewElementUsingString()">
      AppendElements Using String
    </button>
    <div id="LanguagesDiv">
        <ul id="Languages">
            <li>JavaScript</li>
        </ul>
    </div>
</body>
  
</html>  

Producción:

Enfoque 3: Agregar elementos usando JavaScript puro. Utilice el método document.createElement() con el nombre de etiqueta del elemento en el argumento. Establecer valores en las propiedades de los elementos. Aquí están configurando la propiedad innerHTML del elemento de la lista. Agregue el elemento recién creado en un fragmento usando el método appendChild. Agregue el fragmento al cuerpo de DOM o algún Node de DOM ya existente.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Appending new elements to document body .
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script>
        var Elements = ["C", "C++", "Java", "Python", 
                        "R", "Perl", "C#", "PHP"];
  
        function AddElementsByPureJs() {
            var fragment = document.createDocumentFragment();
            for (var i = 0; i < Elements.length; i++) {
                var e = document.createElement("li");
                e.innerHTML = Elements[i];
                fragment.appendChild(e);
            }
            var UlElement = document.getElementById('Languages');
            UlElement.appendChild(fragment);
        }
    </script>
</head>
  
<body>
    <button onclick="AddElementsByPureJs()">
      AppendElements Using Javascript
    </button>
    <div id="LanguagesDiv">
        <ul id="Languages">
            <li>JavaScript</li>
        </ul>
    </div>
</body>
  
</html>    

producción:

Publicación traducida automáticamente

Artículo escrito por willson verma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta