JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Elemente klonen</title>
</head>
<body>
<div id="dst"></div>
<div class="cloneable">Element Nr. 1</div>
<div class="cloneable">Element Nr. 2</div>
<div class="cloneable">Element Nr. 3</div>
<div class="cloneable">Element Nr. 4</div>
</body>
</html>
CSS
* {
margin: 0 ;
padding: 0 ;
border: 0 none ;
}
html, body {
min-width: 100% ;
min-height: 100% ;
}
#dst {
position: absolute ;
top: 50px ;
right: 50px ;
width: 120px ;
height: 90px ;
background-color: lightgreen ;
}
.cloneable {
margin: 5px ;
padding: 5px ;
width: 100px ;
height: 50px ;
background-color: lightblue ;
cursor: pointer ;
}
JavaScript
// Diese Methode bindet die onclick-Events
function initCloneableElements( ) {
// Alle cloneable-Elemente selektieren
var elems = document.getElementsByClassName( "cloneable" ) ;
// onclick-Handler binden
for( var i=0; i<elems.length; i++ ) {
elems[i].onclick = cloneElement ;
}
}
// Diese Methode kopiert das geklickte Element
function cloneElement( ) {
document.getElementById("dst").innerHTML = this.cloneNode( true ).firstChild.nodeValue ;
}
// Initialisierung..
initCloneableElements( ) ;