Trying to add HTML node but it doesn't appear

Question

I've got the following javascript function:

    function addConfirmLine(number, strItem, strValue) {
        var confirmLine = document.getElementById("divConfirmation").appendChild(document.createElement("div"));
        confirmLine.id = "divConfirmLine" + number;

        var confirmItem = confirmLine.appendChild(document.createElement("div"));
        confirmItem.className = "confirmItem";
        confirmItem.nodeValue = strItem;

        var confirmValue = confirmLine.appendChild(document.createElement("div"));
        confirmValue.className = "confirmValue";
        confirmValue.nodeValue = strValue;
    }

and a div like this

<div id="divConfirmation">
    <div class="checkHead">
        Check the following details.  Click "Prev" to make corrections.  Click "Upload" to process and upload the sermon.
    </div>
</div>

The intent is to end up with something like this:

<div id="divConfirmation">
    <div class="checkHead">
        Check the following details.  Click "Prev" to make corrections.  Click "Upload" to process and upload the sermon.
    </div>
    <div id="divConfirmLine1">
        <div class="confirmItem">Item1</div>
        <div class="confirmValue">Value1</div>
    </div>
    <div id="divConfirmLine2">
        <div class="confirmItem">Item2</div>
        <div class="confirmValue">Value2</div>
    </div>
</div>

Problem is it doesn't work. The new divs don't appear, and I don't get any errors. What am I doing wrong?

Answer 1

The nodeValue of an Element is always null. You want to add text nodes:

confirmItem.appendChild(document.createTextNode(strItem));
confirmValue.appendChild(document.createTextNode(strValue));