0
115
VistasSobrescribir elemento de clase html div
Estoy tratando de agregar un elemento duplicado con un nombre de clase diferente, ya que javascript no agregará un objeto duplicado.
Expectativas - 
Agregué un botón con un detector de eventos activado para capturar el elemento principal html y cambiar la clase, pero también cambia la clase del elemento anterior. El objetivo es obtener un elemento duplicado en forma si alguien tiene varios números de teléfono. con el botón debería obtener otra opción de entrada
Aquí está mi código para, no funciona como dije
add_button.addEventListener('click', e=>{ const data = e.target.parentElement.parentElement // Grabs the parent element on height 2 console.log(data) // Got the expected data // ran_value = Math.floor((Math.random() * 100000) + 1); // Tried this function to generate a random value for class var data_new = data // Created another instance of data data_new.setAttribute('class', '1') //add class name console.log(data_new) // changes the class name // paramsDiv.appendChild(data) });Aquí está mi resultado que estoy obteniendo
Mientras estaba en el resultado esperado, debería haber cambiado el nombre de la clase o haberlo agregado en el segundo div solo para que el elemento div duplicado se pueda agregar al formulario paramsDiv.
El resultado esperado es -> 
3 Respuestas
Responde la pregunta0
No sé exactamente su código, pero podría intentar usar nodeClone(), consulte la documentación: https://developer.mozilla.org/fr/docs/Web/API/Node/cloneNode porque el problema que tiene aquí es probablemente la "referencia".
Dime cómo va.
0
La razón por la que sucede es porque cuando asigna data a new_data , no está creando un nuevo objeto. Simplemente le está diciendo a new_data que apunte a data . Por esa razón, cuando cambias new_data , data también cambian. Para crear un elemento completamente nuevo, intente esto:
var data_new = data.cloneNode(true);0
No asigne con var data_new = data en su lugar, clone el nodo con var data_new = data.cloneNode(true)Referencia
Asignar el objeto dom a una nueva variable no creará una nueva copia independiente. En su lugar, ambas variables apuntarán a la misma ubicación.
Si desea insertar el elemento como el primer elemento secundario, puede utilizar la referencia Node.insertBefore()
const add_button = document.getElementById('add-button'); add_button.addEventListener('click', e => { const data = e.target.parentElement.parentElement // Grabs the parent element on height 2 console.log(data) // Got the expected data // ran_value = Math.floor((Math.random() * 100000) + 1); // Tried this function to generate a random value for class var data_new = data.cloneNode(true); // Created another clone instance of data data_new.setAttribute('class', '1') //add class name console.log(data_new) // changes the class name // paramsDiv.appendChild(data) }); <div> Content <button id="add-button">Add</button> </div>