Javascript 无法在面板内放置文本

我有下面的代码，它由两个div组成。我目前试图完成的是在

随机水果列表中放置一行文本。我尝试在我的
suggestid div
中添加一个
p标记
，但它没有出现，我不知道为什么

我试着把文本像下图一样放在这里。但它没有出来任何帮助将非常感谢。


var redpill={}；
var greenpill={}；
var randompill={}；
var key=“红色水果”；
redpill[key]=“苹果”、“樱桃”、“草莓”、“石榴”、“草莓”、“西瓜”、“榴莲”、“鳄梨”、“酸橙”、“蜜露”、“西瓜”、“苹果”、“樱桃”、“草莓”、“石榴”]；
var key2=“绿色水果”；
绿丸[key2]=“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”]；
var key3=“随机果实”；
随机药丸[key3]=“西瓜”、“榴莲”、“Avacado”、“莱姆”、“蜜露”、“西瓜”、“榴莲”、“Avacado”、“莱姆”、“蜜露”、“西瓜”、“榴莲”、“Avacado”、“莱姆”、“蜜露”]；
函数重画（）{
var combineString=''；
$.each（redpill[key]，函数（index）{
combineString+=（“”+redpill[key][index]+“”）；
});
$（'.combineclass'）.html（combineString）；
$.each（绿色药丸[key2]，函数（索引）{
combineString+=（''+绿色药丸[key2][index]+''）；
});
$（'.combineclass'）.html（combineString）；
var randomString=''；
$.each（随机药丸[key3]，函数（索引）{
randomString+=（''+randompill[key3][index]+''）；
});
$（'.randomclass'）.html（随机字符串）；
}
函数侦听器（）{
$（文档）.ready（函数（）{
$（文档）。在（“单击”，suggestid div），函数（）上{
data=this.innerHTML；
$（“.total\u count\u Green\u Fruits”）.html（键2+：“+greenpill[key2].length）；
var元素=$（this.detach（）；
$（'#currentid'）.prepend（''+element.html（）+''）；
});
});
$（'body'）。在（'click'，'div.new-green-fruit'，function（）上{
data2=this.innerHTML；
$（this.detach（）；
var element2=$（this.detach（）；
$（'#suggestid'）.prepend（''+element2.html（）+''）；
});
}
重画（）；
监听器（）
.pilldiv{
填充：8px 15px；
文本对齐：居中；
字体大小：15px；
边界半径：25px；
颜色：黑色；
保证金：2倍；
}
.以后{
内容：“\002B”；
浮动：左；
宽度：16px；
}
.新的绿色水果：之后{
内容：“\292B”；
浮动：左；
宽度：16px；
}
雷德派尔先生{
背景颜色：粉红色；
游标：默认值；
}
格林皮尔先生{
背景色：春绿；
游标：默认值；
}
.随机药丸{
背景颜色：浅蓝色；
光标：指针；
}
.类{
字体系列：开放式SAN；
}
.中心{
显示器：flex；
证明内容：中心；
}
.包装盒{
显示器：flex；
柔性包装：包装；
证明内容：中心；
边框：1px实心；
填充顶部：30px；
填充底部：30px；
}
.新的绿色水果{
背景颜色：浅蓝色；
光标：指针；
}
#左面板{
弹性基础：计算（50%-5px）；
}
#右面板{
弹性基础：计算（50%-5px）；
}
.集装箱{
显示器：flex；
调整项目：灵活启动；
证明内容：之间的空间；
flex-flow：行nowrap；
最大高度：100%；
宽度：85%；
背景色：白色；
左边距：自动；
右边距：自动；
边缘顶部：25px；
}

总果数
随机果实
这里有很多水果

函数将覆盖并替换div的内容，使用
.append（）
在div末尾添加一些内容


var redpill={}；
var greenpill={}；
var randompill={}；
var key=“红色水果”；
redpill[key]=“苹果”、“樱桃”、“草莓”、“石榴”、“草莓”、“西瓜”、“榴莲”、“鳄梨”、“酸橙”、“蜜露”、“西瓜”、“苹果”、“樱桃”、“草莓”、“石榴”]；
var key2=“绿色水果”；
绿丸[key2]=“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”]；
var key3=“随机果实”；
随机药丸[key3]=“西瓜”、“榴莲”、“Avacado”、“莱姆”、“蜜露”、“西瓜”、“榴莲”、“Avacado”、“莱姆”、“蜜露”、“西瓜”、“榴莲”、“Avacado”、“莱姆”、“蜜露”]；
函数重画（）{
var combineString=''；
$.each（redpill[key]，函数（index）{
combineString+=（“”+redpill[key][index]+“”）；
});
$（'.combineclass'）.html（combineString）；
$.each（绿色药丸[key2]，函数（索引）{
combineString+=（''+绿色药丸[key2][index]+''）；
});
$（'.combineclass'）.html（combineString）；
var randomString=''；
$.each（随机药丸[key3]，函数（索引）{
randomString+=（''+randompill[key3][index]+''）；
});
$（'.randomclass'）.append（randomString）；
}
函数侦听器（）{
$（文档）.ready（函数（）{
$（文档）。在（“单击”，suggestid div），函数（）上{
data=this.innerHTML；
$（“.total\u count\u Green\u Fruits”）.html（键2+：“+greenpill[key2].length）；
var元素=$（this.detach（）；
$（'#currentid'）.prepend（''+element.html（）+''）；
});
});
$（'body'）。在（'click'，'div.new-green-fruit'，function（）上{
data2=this.innerHTML；
$（this.detach（）；
var element2=$（this.detach（）；
$（'#suggestid'）.prepend（''+element2.html（）+''）；
});
}
重画（）；
监听器（）
.pilldiv{
填充：8px 15px；
文本对齐：居中；
字体大小：15px；
边界半径：25px；
颜色：黑色；
保证金：2倍；
}
.以后{
内容：“\002B”；
浮动：左；
宽度：16px；
}
.新的绿色水果：之后{
内容：“\292B”；
浮动：左；
宽度：16px；
}
雷德派尔先生{
背景颜色：粉红色；
游标：默认值；
}
格林皮尔先生{
背景色：春绿；
游标：默认值；
}
.随机药丸{
背景色：