HTML元素未定义

Question

当我想把任何元素保存到变量中时，它最终都是未定义的。在这种情况下，就是basketDiv，当我试图追加到它时，它说它是未定义的。html和js是在不同的文件中。但我不认为这是问题所在，因为其他一切都正常。

谢谢你的帮助

    function createItemRow(name, price, amount)
    {
    var itemRow = document.createElement('div');
    var basketDiv = this.document.getElementsByClassName('basket')[0];
    itemRow.classList.add('item');
    var itemRowHtml = `
    <h2 id="name">${name}</h2>
    <h2 id="amount">Amount: ${amount}</h2>
    <h2 class="close">X</h2>                
    <h2 id="price">${price} Kč</h2>`;
    itemRow.innerHTML = itemRowHtml;
    console.log(basketDiv);
    basketDiv.append(itemRow);
    }

    <div class='basket'>
            <div class="item">
                <h2 id="name">Xiaomi Mi A2</h2>
                <h2 id="amount">Amount: 1</h2>
                <h2 class="close">X</h2>                
                <h2 id="price">5000 Kč</h2>
            </div>   
            <div class="item">
                <h2 id="name">Xiaomi Mi A2</h2>
                <h2 id="amount">Amount: 1</h2>
                <h2 class="close">X</h2>                
                <h2 id="price">5000 Kč</h2>
            </div>  
            <div class="item">
                <h2 id="name">Xiaomi Mi A2</h2>
                <h2 id="amount">Amount: 1</h2>
                <h2 class="close">X</h2>                
                <h2 id="price">5000 Kč</h2>
            </div>  
        </div>

Answer 1

你的功能实际上是工作的，也许你尝试得到的元素之前，页面渲染

function createItemRow(name, amount, price) {
   	var itemRow = document.createElement('div');
    var basketDiv = this.document.getElementsByClassName('basket')[0];
    itemRow.classList.add('item');
    var itemRowHtml = `
    <h2 class="name"> ${name}</h2>
    <h2 class="amount">Amount: ${amount}</h2>
    <h2 class="close">X</h2>                
    <h2 class="price">${price} Kč</h2>`;
    itemRow.innerHTML = itemRowHtml;
    console.log(basketDiv);
    basketDiv.append(itemRow);
}

.item {
  border: 1px solid red;
  margin-top: 5px;
}

<button onClick="createItemRow('toto', 50, 10)">createItemRow</button> 
 <div class='basket'>
     <div class="item">
       <h2 id="name">Xiaomi Mi A2</h2>
       <h2 id="amount">Amount: 1</h2>
       <h2 class="close">X</h2>                
       <h2 id="price">5000 Kč</h2>
     </div>   
</div>