biologyscience/file.html

## file.html
<html>
<head>
    <style>
        ul
        {
            list-style: none;
            margin: 1.2em 0;
            padding: .5em;
        }

        .current.yes { outline: 2px solid red; }

        li
        {
            width: 100px;
            background-color: blueviolet;
            margin: 1em 0;
        }

        button
        {
            margin: 0 1em;
        }
    </style>
</head>
<body>
    <div> </div>

    <button id="ce">create element</button>

    <script>
        const sort = require('sortable-dnd');

        let x;

        document.getElementById('ce').onclick = () =>
        {
            const data =
            `
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            `;

            const ul = document.createElement('ul');

            ul.innerHTML = data;

            ul.classList.add('current', 'yes');

            const div = document.querySelector('div');

            Array.from(div.children).forEach(x => x.classList.remove('current'));

            div.append(ul);

            x?.destroy();

            x = new sort(document.querySelector('.current.yes'));
        };

    </script>
</body>
</html>
	<html>
	<head>
	<style>
	ul
	{
	list-style: none;
	margin: 1.2em 0;
	padding: .5em;
	}

	.current.yes { outline: 2px solid red; }

	li
	{
	width: 100px;
	background-color: blueviolet;
	margin: 1em 0;
	}

	button
	{
	margin: 0 1em;
	}
	</style>
	</head>
	<body>
	<div> </div>

	<button id="ce">create element</button>

	<script>
	const sort = require('sortable-dnd');

	let x;

	document.getElementById('ce').onclick = () =>
	{
	const data =
	`
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	`;

	const ul = document.createElement('ul');

	ul.innerHTML = data;

	ul.classList.add('current', 'yes');

	const div = document.querySelector('div');

	Array.from(div.children).forEach(x => x.classList.remove('current'));

	div.append(ul);

	x?.destroy();

	x = new sort(document.querySelector('.current.yes'));
	};

	</script>
	</body>
	</html>