不创建新节点的JS中的appendChild

Question

下面是我的代码片段。我想根据我的条件添加新的列表项。除了脚本没有创建新的项目点和将所有文本添加到同一个项目点之外，一切都进行得很顺利。

if(revenue2015 > revenue2016 && revenue2015!=0 && revenue2016!=0){
     per=(revenue2016-revenue2015)/revenue2015;
     revenuePoint.appendChild(document.createElement('li').appendChild(document.createTextNode("Revenue decreased by ("+(per*100)+"%) on YoY basis from 2015 to 2016.")));
}
else if(revenue2015 < revenue2016 && revenue2015!=0 && revenue2016!=0){
     per=(revenue2016-revenue2015)/revenue2015;
     revenuePoint.appendChild(document.createElement('li').appendChild(document.createTextNode("Revenue increased by "+(per*100)+"% on YoY basis from 2015 to 2016.")));
}
else if(revenue2015 == 0 || revenue2016 == 0)
{
    if(revenue2015 ==0 && revenue2016 == 0){
        revenuePoint.appendChild(document.createElement('li').appendChild(document.createTextNode("Revenue data for the both 2015 & 2016 are missing.")));
    }
    else if(revenue2015 ==0 && revenue2016 != 0){
        revenuePoint.appendChild(document.createElement('li').appendChild(document.createTextNode("Revenue data for 2015 is missing.")));
    }
    else if(revenue2016 ==0 && revenue2015 != 0){
        revenuePoint.appendChild(document.createElement('li').appendChild(document.createTextNode("Revenue data for 2016 is missing.")));
    }
}


if(revenue2016 > revenue2017 && revenue2016!=0 && revenue2017!=0){
     per=(revenue2017-revenue2016)/revenue2016;
     revenuePoint.appendChild(document.createElement('li').appendChild(document.createTextNode("Revenue decreased by ("+(per*100)+"%) on YoY basis from 2016 to 2017.")));
}
else if(revenue2016 < revenue2017 && revenue2016!=0 && revenue2017!=0){
     per=(revenue2017-revenue2016)/revenue2016;
     revenuePoint.appendChild(document.createElement('li').appendChild(document.createTextNode("Revenue increased by "+(per*100)+"% on YoY basis from 2016 to 2017.")));
}
else if(revenue2017 == 0)
{
        revenuePoint.appendChild(document.createElement('li').appendChild(document.createTextNode("Revenue data for 2017 is missing!!!")));
}

输出是

2015年和2016年的收入数据都是missing.Revenue的2017年数据丢失了！

然而，它应该在两个单独的项目点，而不是同一条线。有什么解决办法吗？

Answer 1

appendChild返回的值是追加的节点，因此当您这样做时：

     revenuePoint.appendChild(document.createElement('li').appendChild(document.createTextNode("Revenue decreased by ("+(per*100)+"%) on YoY basis from 2015 to 2016.")));

附加到revenuePoint的节点是最后的文本节点，而不是LI。因此，您得到的只是所有文本节点的连接。您必须将其分解为单独的语句，例如：

var li = revenuePoint.appendChild(document.createElement('li')); // returns the LI
li.appendChild(document.createTextNode("Revenue decreased by (" +
               (per * 100) + "%) on YoY basis from 2015 to 2016.")); // returns the text node

虽然您可能希望创建一个只传递根节点和文本的函数，但是它会生成LI并追加文本。

PS。在原始代码中，当文本节点附加到revenuePoint时，它将与最初附加到的LI分离。LI没有引用它，因此可以用于垃圾收集。

Answer 2

请注意，下面一行将不能工作：revenuePoint.appendChild(document.createElement('li').appendChild(document.createTextNode("Revenue data for 2017 is missing!!!")))

你必须像下面这样分开：

var li = document.createElement('li');
var textNode = document.createTextNode("Revenue data for 2017 is missing!!!")
li.appendChild(textNode);
revenuePoint.appendChild(li);