insertAdjacentElement不追加给定的项目

Question

我正在尝试创建一个小的todo JS算法，这是非常基本的香草JS。我已经完成了基本添加项的大部分逻辑。但我有一个问题。当我尝试使用<p>将<a>标签与insertAdjacentElement标签结合在一起时，整个<p>标签不会包裹<a>标签。我用尽了所有想法，尽管我求助于你们。

我的代码：

    var userInput = document.getElementById('user-input'),
    saveButton = document.getElementById('btn'),
    resultEl = document.getElementById('saved-text'),
    counter = 0;

function makeMasterDeleteButton(counter) {
    var btn = document.createElement('a');
    btn.textContent = 'X';
    btn.classList.add('item-delete');
    btn.setAttribute('href', '#');
    btn.setAttribute('id', counter);
    return btn;
}

function makeNewItem() {
    var noteElement = document.createElement('p');
    noteElement.textContent = userInput.value;
    return noteElement;
}

function joinItemAndButton (counter) {
    var newNode;
    var item = makeNewItem();
    var button = makeMasterDeleteButton(counter);
    newNode = item.insertAdjacentElement('afterbegin', button);
    return newNode;

}

if (userInput !== null && saveButton !== null && resultEl !== null) {

    // Listen for clicks on form button
    saveButton.addEventListener('click', function (event) {

        note =  joinItemAndButton(counter++);
        resultEl.appendChild(note);

        userInput.value = '';
        event.preventDefault();
    });
}