Why does .innerHTML work, but not .appendChild()?

Why does .innerHTML work, but not .appendChild()?
0

I’m making a simple tip calculator and was having trouble appending the the result to an empty div that I have (class=“answer-area”).

Trying to set the result to a variable then appending it to the answer area wasn’t working, but then I found if I just set

answerArea.innerHTML = result

it worked fine.

Could anyone tell my why this is, or what the correct way to add the result to the div would be? Any general feedback on code quality is also welcome.

Thanks! Here’s the code:

    <h1>Tip Calculator</h1>
    <div class="calc-container">
        <div class="total-bill-container">
            <form action="">
                <input name="bill-total" id="bill" step=".01" type="number">
            </form>
            <h3>Total Bill</h3>
        </div>
        <div class="service-container">
            <select name="serviceOptions" id="service">
                <option value=".25">Excellent (25%)</option>
                <option value=".20">Great (20%)</option>
                <option value=".15">Average (15%)</option>
                <option value=".10">Poor (10%)</option>
            </select>
        </div>
        <div class="people-paying-container">
            <form action="">
                <input type="number" id="people-splitting">
            </form>
            <h4>People Splitting Tip</h4>
        </div>
        <div class="answer-area">

        </div>
    </div>
    <div class="button-div">
        <button id="getTotal" onclick="calculate()">calculate</button>
    </div>
calculate = () => {
    let bill = document.getElementById("bill").value
    let selectedValue = document.getElementById('service').value 
    let peopleSplitting = document.getElementById('people-splitting').value
    let answerArea = document.querySelector('.answer-area')

    let result = (bill * selectedValue / peopleSplitting).toFixed(2)

    //answerArea.appendChild(result)
     answerArea.innerHTML = result
    
}

The commented line is where I was trying to append.

If I understand correctly, appendChild will append a node, like an other element. You can’t use that to set the text content of something. To use appendChild you need first to create an element that contain your text and then append that element.
To do what you want it seems you would need to create a text node, with createTextNode to use appendChild to set the text content of something, see the examples in the page below.

https://www.w3schools.com/jsref/met_node_appendchild.asp

That makes perfect sense. Thank you!