JS中的appendChild没有创建新节点

时间:2018-01-04 04:27:36

标签: javascript

以下是我的代码段。我想根据我的条件添加新的列表项。一切顺利,除了脚本没有创建新的子弹点,并且它将所有文本添加到同一个项目符号点。

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年和2015年的收入数据2016年缺失。2017年的收入数据缺失!!!

但是,它应该在两个单独的子弹点而不是同一行。任何解决方案?

2 个答案:

答案 0 :(得分:0)

appendChild 返回的值是附加的节点,所以当你这样做时:

from django.contrib import admin
from . import models


    class BookAdmin(ModelAdmin):
        list_display = ('name', 'date', 'andwhatnot', 'author_variable')

        def author_variable(self, obj):
            try:
                return self.author.blankablevariable
            except:
                pass

admin.site.register(models.Book, BookAdmin)

附加到 revenuePoint 的节点是最终文本节点,而不是LI。所以你得到的只是所有文本节点的串联。你必须把它分成单独的语句,如:

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

虽然您可能希望创建一个只传递根节点和文本的函数,然后生成LI并附加文本。

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

答案 1 :(得分:0)

请注意,以下行不起作用: 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);