0

Como puedo clonar elementos de html y poder cambiarle sus propiedades independientemente?

Intenté con esto:

function clonar(){
  var c = document.getElementById("about0");
  var clon = c.cloneNode(true);
  clon.style.width = "1000px";
  document.body.appendChild(clon);
}
#about {
  width: 350px;
  height: 350px;
  border-radius: 175px;
  background-color:gray;
  
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="about"></div>
</body>
</html>

Con "independiente" me refiero a que a los elementos clonados les pueda cambiar sus propiedades, osea de todas las propiedades que heredó, si quiero cambiarle el color, etc.

5
  • 1
    Se acepta jquery?
    – Einer
    el 10 sep. 2017 a las 17:26
  • Quiero Javascript puro @Einer
    – ESCM
    el 10 sep. 2017 a las 17:27
  • aaawww :(. Por cierto. Cual es el error con tu implementacion?
    – Einer
    el 10 sep. 2017 a las 17:29
  • Que no aparece el clon
    – ESCM
    el 10 sep. 2017 a las 17:34
  • ¿Será porque intentas clonar un elemento que no existe? ...
    – gugadev
    el 10 sep. 2017 a las 18:00

2 respuestas 2

4

Segun la documentacion se puede utilizar Node#cloneNode:

El método Node.cloneNode () devuelve un duplicado del nodo en el que se llamó este método.

Y claramente lo estas utilizando lo que entiendo que el error que tienes es que no estas llamando la funcion clonar y estas utilizando el id equivocado, en vez de about0, deberia de ser about. Aqui tu ejemplo editado

function clonar(){
  var c = document.getElementById("about");
  var clon = c.cloneNode(true);
  clon.style.width = "1000px";
  document.body.appendChild(clon);
  
}
#about {
  width: 350px;
  height: 350px;
  border-radius: 175px;
  background-color:gray;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="about" onclick="clonar()"></div>
</body>
</html>

0

No estas invocando la funcion clonar() y el id about0 no existe, deberia ser about

function clonar() {
  var c = document.getElementById("about");
  var clon = c.cloneNode("about");
  clon.style.width = "50px";
  clon.style.height = "50px";
  document.body.appendChild(clon);

 
}
clonar();
#about {
  width: 350px;
  height: 350px;
  border-radius: 175px;
  background-color: gray;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="about"></div>
</body>

</html>

1
  • Si se está invocando la función, con el evento onclick dentro de este elemento.
    – lromeraj
    el 10 sep. 2017 a las 18:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.