无法理解javascript项目的append/prepend

name=“乔尔·卡特”；
title=“软件开发人员”
mobile=“708-5xx-xx90”
电子邮件=”carter3689@gmail.com"
var formattedName=HTMLheaderName.replace（“%data%”，name）；
var formattedTitle=HTMLheaderRole.replace（“%data%”，title）；
var formattedmobile=HTMLmobile.replace（“%data%”，mobile）；
var formattedEmail=HTMLemail.replace（“%data%”，email）；
变量格式化
$（“#标题”）.append（格式化名称）；
$（“#标题”）.append（格式化标题）；
$（“#topContacts”）.prepend（FormattedMobile）；
$（“#topContacts”）.prepend（格式化电子邮件）
body，
分区，
ul，
锂，
P
h1，
h2，
h3，
h4，
h5，
h6{
填充：0；
保证金：0；
字体系列：“Roboto”，无衬线；
}
1.清除故障{
溢出：自动；
}
.教育入学，
.工作输入，
.项目进入{
填充：0.5%；
}
h1{
字体大小：40px；
颜色：#f5a623；
线高：48px；
显示：内联；
}
氢{
字体大小：粗体；
字体大小：24px；
颜色：#999；
线高：29px；
填充：10px；
}
h3{
字体：斜体；
字体大小：20px；
颜色：#000；
线高：22px；
}
h4{
字体大小：粗体；
字体大小：14px；
颜色：#4a4a4a；
线高：17px；
}
h2，
h3，
h4，
h5{
填充物：10px 5%；
}
.日期文本{
字体：斜体；
字体大小：14px；
颜色：#999；
线高：16px；
浮动：左；
}
.位置文本{
字体：斜体；
字体大小：14px；
颜色：#999；
线高：16px；
浮动：对；
}
p{
字体大小：14px；
颜色：#333；
线高：21px；
}
a{
颜色：#1199c3；
文字装饰：无；
边缘顶部：10px；
显示：块；
}
.欢迎辞{
字体：斜体；
字号：18px；
颜色：#F3；
线高：28px；
}
#技能-h3{
颜色：#f5ae23；
显示：无；
}
.橙色{
背景色：#f5ae23；
}
.橙色文本{
颜色：#f5ae23；
}
.白色文本{
字体大小：粗体；
颜色：#fff；
}
格雷先生{
背景色：#F3；
垫底：10px；
明确：两者皆有；
}
.深灰色{
背景色：#4a4a4a；
}
/*TODO:稍后替换为映像*/
#标题{
背景色：#4848；
}
.软盒{
显示：-webkit flex；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：周围的空间；
填充：10px；
}
.中心内容{
填充物：2.5%5%；
}
保险商实验室{
列表样式类型：无；
}
.传记片{
浮动：左；
填充：10px；
宽度：200px；
显示：无；
}
img{
填充：10px；
}
跨度{
填充物：5px；
}
#让我们联系{
文本对齐：居中；
}
/*处理各种设备宽度的媒体查询*/
@仅介质屏幕和（最大宽度：1024px）{
#让我们联系{
利润率最高：5%；
}
}
@仅介质屏幕和（最大宽度：900px）{
.传记片{
宽度：175px；
}
}
@仅介质屏幕和（最大宽度：750px）{
#让我们联系{
利润率最高：10%；
}
.传记片{
宽度：150px；
}
.欢迎辞{
显示：无；
}
}
#地图{
显示：块；
身高：100%；
利润率：0.5%；
}
#mapDiv{
高度：400px；
宽度：100%；
垫底：5%；
}
@仅介质屏幕和（最小宽度：750px）{
#技能-h3，
.传记片{
显示：块；
}
}

简历

工作经验
项目
教育类
我生活和工作过的地方
让我们连线


//注意，这个HTML中突然出现了JavaScript
//文件？您可以在标记之间编写JavaScript。在你生命的尽头
//JavaScript，不要忘记带斜杠（/）的结束脚本标记。
//此外，这是一个JavaScript风格的注释。您可以使用以下命令在JavaScript中进行注释：
//一行上所有后续字符的两个斜杠，或
/*
块注释的开始和结束斜杠星号集。
*/
if（document.getElementsByClassName（'flex-item'）。长度==0）{
document.getElementById（'topContacts'）.style.display='none'；
}
if（document.getElementsByTagName（'h1'）。长度==0）{
document.getElementById（'header'）.style.display='none'；
}
if（document.getElementsByClassName（'work-entry'）。长度==0）{
document.getElementById（'workExperience'）.style.display='none'；
}
if（document.getElementsByClassName（'project-entry'）。长度==0）{
document.getElementById（'projects'）.style.display='none'；
}
if（document.getElementsByClassName（'education-entry'）。长度==0）{
document.getElementById（'education'）.style.display='none'；
}
if（document.getElementsByClassName（'flex-item'）。长度==0）{
document.getElementById（'let-connect'）。style.display='none'；
}
if（document.getElementById（'map'）==null）{
document.getElementById（'mapDiv'）.style.display='none'；
}
我认为您的问题在于div头已经包含ul元素topContacts。因此，您在.append（）中添加的任何内容都将放在该元素之后。我将尝试.before（）而不是.append（）

这将在ul elment前插入您的姓名和职务。然后，对于未排序的列表#topContacts，请尝试：

$('#topContacts').append($('<li>').html(formattedMobile)); 
$('#topContacts').append($('<li>').html(formattedEmail));

$（'#topContacts'）.append（$（'
'）.html（formattedMobile））；
$（“#topContacts”）.append（$（“
”）.html（格式化电子邮件））；

这将在ul元素中添加一个li元素，该元素包含移动和电子邮件信息的文本。
您还可以提供html文档和任何css文件。是否要
$（“#header”）.append（FormattedMobile）？
prepend
，add before，（pre）和
append
，add after等。您能显示生成页面的来源吗？
$('#topContacts').append($('<li>').html(formattedMobile)); 
$('#topContacts').append($('<li>').html(formattedEmail));