JavaScript: trabajar con el Modelo de Objetos del Documento (DOM)

En esta lección, veremos cómo crear e insertar nuevos elementos en el modelo de objetos de documento. Entonces, veamos qué tenemos hasta ahora. Tiene su casilla de selección de variedad de jardín aquí, y tengo un tamaño de cinco especificado para que salga como un cuadro de lista, y tenemos algunos elementos de opción existentes. Digamos, por ejemplo, que tal vez este sea un sitio de viajes. La gente quiere elegir una ciudad para visitar. Les damos algunas opciones predeterminadas. También queremos permitirles agregar una nueva ciudad a la lista. y van a poder hacer eso escribiendo el nombre de la ciudad aquí abajo. Ahora bien, esto todavía no funciona. Agregaremos el código para que lo haga. Entonces, tengo un controlador de eventos aquí para el botón de enviar y he seleccionado que representa este cuadro que ya tenemos aquí. Así que voy a seguir dos pasos aquí. Lo primero es que voy a crear mi nuevo elemento. y el segundo es que lo voy a insertar en el elemento existente en un lugar particular. Este es solo un pequeño método de ayuda que he creado que me permite tomar una ciudad con espacios en el nombre y convertir eso en un valor específico allí. Pero el quid de esto es observe que estoy haciendo document.createElement y estoy creando un elemento de opción. Cuando desee especificar atributos para ese elemento, simplemente puede etiquetarlos con sus valores. Entonces, el valor será esa cadena en minúsculas que creo aqui y el texto será el valor real del cuadro de la ciudad que hemos hecho allí. Así que lo hemos creado. Ahora, ¿cómo lo llevamos a donde queremos que esté? Y tenemos un par de formas diferentes que podemos ir aquí. El primero es anteponer. Entonces estoy tomando ese elemento selecto y esto simplemente lo inserta antes del primer elemento secundario. Entonces, si volvemos aquí y echamos un vistazo, ahí está tu colección de elementos secundarios para el cuadro de lista de selección. Así que me quedo con eso. Voy a agregar eso al principio. Escribamos Tokio y presiono mi botón de enviar y ahí lo convierte en el primero en llegar. Ahora, también podríamos hacerlo de una manera ligeramente diferente. También tenemos insertBefore. InsertBefore toma el elemento que vamos a insertar, el elemento que vamos a insertar, como primer parámetro y dice adónde queremos que vaya. Entonces, en este caso, los nodos secundarios de cero, y guardemos eso y rehagamos la página nuevamente. Y esto debería hacerlo bien desde el principio. Ciertamente no estamos restringidos al primer elemento. Podría decir que haga eso y terminamos que está aquí abajo. Ahora observe que ese no es el cuarto o incluso el quinto elemento, pero lo que tienes que entender sobre estos elementos es que las opciones no son los únicos nodos allí. El espacio en blanco, por ejemplo, se presenta como un nodo de texto. Entonces tienes que mirar con mucho cuidado cuando está rastreando los elementos de esa colección. Ahora, si quieres insertarlo al final, también podemos hacer eso. Intentémoslo como otra forma de hacer esto. Aquí vamos. Append simplemente lo deja al final. Entonces, si intentamos esto una vez más, ahí vamos, ese es el último. Entonces, en esta lección aprendimos algunas formas diferentes para asegurarnos de que aparezca nuestro nuevo elemento en un lugar particular del elemento existente en el DOM. Gracias por ver. En nuestra próxima lección, hablaremos más sobre navegando por la jerarquía del modelo de objetos de documento.