DavidBernalGonzalez/App.js

## App.js
// Array de objetos
const TECNOLOGIAS = [
	{ name: "HTML", uso: "Front End" },
	{ name: "CSS", uso: "Front End" },
	{ name: "JavaScript", uso: "Back & Front" },
	{ name: "Java", uso: "Back End" },
	{ name: "PHP", uso: "Back End" },
];

// Seleccionando el elemento padre
const ROOT_ELEMENT = document.getElementById("root");

//Creando el nodo UL
const UL = document.createElement("ul");
//Añadiendole la clase list
UL.className = "list";
//Añadiendo el nodo UL sobre el nodo ROOT
ROOT_ELEMENT.appendChild(UL);

// Preparando el texto a injectar por DOM
const TECH = (params) => {
    //Creando el nodo LI
	const LI = document.createElement("li");
    //Creando un nodo de texto
	const TXT = document.createTextNode(params.name);
    //Añadiendo el nodo de TXT al nodo LI
	LI.appendChild(TXT);
    //Finalmente retornamos el LI para que se pueda añadir al UL
    return LI;
};

/// Seleccionado al elemento UL que acabamos de crear
const LIST_ITEM = document.querySelector(".list");

// Por cada tecnología añadiremos llamaremos a TECH y añadiremos
TECNOLOGIAS.forEach((item) => UL.appendChild(TECH(item)));

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Etiqueta en la que inyectaremos los elementos-->
    <div id="root"></div>
    <!-- Llamamos a app.js para inyectar el contenido desde el DOM -->
    <script src="./App.js"></script>
</body>
</html>
	// Array de objetos
	const TECNOLOGIAS = [
	{ name: "HTML", uso: "Front End" },
	{ name: "CSS", uso: "Front End" },
	{ name: "JavaScript", uso: "Back & Front" },
	{ name: "Java", uso: "Back End" },
	{ name: "PHP", uso: "Back End" },
	];

	// Seleccionando el elemento padre
	const ROOT_ELEMENT = document.getElementById("root");

	//Creando el nodo UL
	const UL = document.createElement("ul");
	//Añadiendole la clase list
	UL.className = "list";
	//Añadiendo el nodo UL sobre el nodo ROOT
	ROOT_ELEMENT.appendChild(UL);

	// Preparando el texto a injectar por DOM
	const TECH = (params) => {
	//Creando el nodo LI
	const LI = document.createElement("li");
	//Creando un nodo de texto
	const TXT = document.createTextNode(params.name);
	//Añadiendo el nodo de TXT al nodo LI
	LI.appendChild(TXT);
	//Finalmente retornamos el LI para que se pueda añadir al UL
	return LI;
	};

	/// Seleccionado al elemento UL que acabamos de crear
	const LIST_ITEM = document.querySelector(".list");

	// Por cada tecnología añadiremos llamaremos a TECH y añadiremos
	TECNOLOGIAS.forEach((item) => UL.appendChild(TECH(item)));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<!-- Etiqueta en la que inyectaremos los elementos-->
	<div id="root"></div>
	<!-- Llamamos a app.js para inyectar el contenido desde el DOM -->
	<script src="./App.js"></script>
	</body>
	</html>