DOM Manipulation - Placement

const message = document.querySelector('#message');
const moveable = document.querySelector('.moveable');
const target = document.querySelector('.target');
const after = document.querySelector('#after');
const before = document.querySelector('#before');
const append = document.querySelector('#append');
const appendChild = document.querySelector('#appendChild');
const prepend = document.querySelector('#prepend');
const closest = document.querySelector('#closest');
const create = document.querySelector('#create');
const remove = document.querySelector('#remove');
after.addEventListener('click', _ => {
    target.after(moveable);
    message.innerText = 'target.after(moveable); // add to target\'s parent after target';
});
before.addEventListener('click', _ => {
    target.before(moveable);
    message.innerText = 'target.before(moveable); // add to target\'s parent before target';
});
append.addEventListener('click', _ => {
    target.append(moveable);
    message.innerText = 'target.append(moveable); // insert one or more nodes after last child node of target';
});
appendChild.addEventListener('click', _ => {
    target.appendChild(moveable);
    message.innerText = 'target.appendChild(moveable); // insert a single node after last child node of target';
});
prepend.addEventListener('click', _ => {
    target.prepend(moveable);
    message.innerText = 'target.prepend(moveable); // insert before first child node of target';
});
closest.addEventListener('click', e => {
    let x = moveable.closest('div');
    x.classList.toggle('border-1');
    x.classList.toggle('border-danger');
    x.classList.toggle('p-3');
    if (!x.classList.contains('border-1')) {
        x.firstChild.remove();
        message.innerText = '';
        e.target.innerText = 'Closest';
    }
    else {
        message.innerText = 'let x = moveable.closest(\'div\');\nmoveable\'s closest div is\n' + x.classList;
        x.prepend('closest');
        e.target.innerText = 'Reset Closest';
    }
});
create.addEventListener('click', _ => {
    let a = document.createElement('a');
    a.href = 'https://www.mikesdotnetting.com';
    a.textContent = 'Mikesdotnetting';
    a.id = 'link';
    moveable.closest('div').appendChild(a);
    message.textContent = `let a = document.createElement('a');
a.href = 'https://www.mikesdotnetting.com';
a.textContent = 'Mikesdotnetting'
a.id = 'link';
moveable.closest('div').appendChild(a);`;
});
remove.addEventListener('click', _ => {
    document.querySelector('#link').remove();
    message.textContent = `document.querySelector('#link').remove();`;
});