JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<table>
	<tr id="cloneme">
		<td>Test</td>
		<td>Test 2</td>
	</tr>
	<tr>
		<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, fugit.</td>
		<td>Another</td>
	</tr>
</table>

<table id="dest"></table>

JavaScript

console.clear();

function getChildren(node) {
	
}

function duplicateNode(node) {
	let newElement = document.createElement(node.tagName);
	let nodeProps = window.getComputedStyle(node);
	let baseProps = window.getComputedStyle(newElement);
	let newProps = {};

	//Remove styles with default value
	document.body.appendChild(newElement);
	for (let prop of [...nodeProps]) {
		if (nodeProps[prop] != baseProps[prop]) {
			newProps[prop] = nodeProps[prop];
		}
	}
	document.body.removeChild(newElement);

	// Copy in children
	newElement.children = getChildren(node);

	newElement.style.cssText = Object.keys(newProps)
		.reduce((p, c) => p + `${c}:${newProps[c]}`, "");

	return newElement;
}

let cloneme = document.querySelector("#cloneme");
let clone = duplicateNode(cloneme);
document.querySelector("#dest").appendChild(clone);