替换"节点"上的子项：参数 1 的类型不是"节点"

Question

嗨，我一直在检查我的代码，但我不知道为什么会发生错误。显然我没有从我的孩子那里得到我的孩子价值观ttList.

<ul id = "ttList" style="list-style: none; padding-left: 0"></ul>
function creatTT()
{
    var input = document.getElementById("integer").value;
    var li;
    var value;
    if(/^[1-9]$/.test(input) == true)
    {
        for(var i = 1; i <= 9; i++)
        {
            li = document.createElement("li");
            value = document.createTextNode(input + " x "  + i  + " = " + (input* i));
            li.appendChild(value);
            document.getElementById("ttList").appendChild(li);
        }
    }
        var ttList = document.getElementById("ttList").childNodes[0];
        ttList.replaceChild(input, ttList.childNodes[0]);
}

Answer 1

你在 replaceChild 方法中使用 Node 的值，而不是 Node 本身。 请尝试使用以下代码。

<ul id = "ttList" style="list-style: none; padding-left: 0"></ul>
function creatTT()
{
    var input = document.getElementById("integer").value;
    var inputNode = document.getElementById("integer");
    var li;
    var value;
    if(/^[1-9]$/.test(input) == true)
    {
        for(var i = 1; i <= 9; i++)
        {
            li = document.createElement("li");
            value = document.createTextNode(input + " x "  + i  + " = " + (input* i));
            li.appendChild(value);
            document.getElementById("ttList").appendChild(li);
        }
    }
        var ttList = document.getElementById("ttList").childNodes[0];
        ttList.replaceChild(inputNode , ttList.childNodes[0]);
}

Answer 2

将输入替换为replacechild中的document.getElementById("integer")，因为input包含input element的值，而不是元素本身。 replacechild期望替换元素而不是值。

function creatTT()
{
    var input = document.getElementById('value').value;
    var li;
    var value;
    if(/^[1-9]$/.test(input) == true)
    {
        for(var i = 1; i <= 9; i++)
        {
            li = document.createElement("li");
            value = document.createTextNode(input + " x "  + i  + " = " + (input* i));
            li.appendChild(value);
            document.getElementById("ttList").appendChild(li);
        }
    }
        var ttList = document.getElementById("ttList").childNodes[0];
          ttList.replaceChild(document.getElementById('value'), ttList.childNodes[0]);
      
}
creatTT()

<input id="integer" value='6' />
<ul id = "ttList" style="list-style: none; padding-left: 0"></ul>