Javascript 使文字对象具有参数？

目前我正在使用Javascript在HMTL页面上显示动物及其信息

目前它显示了一只兔子的图像和如下信息：

兔子图片
年龄范围：3个月-2岁
最大采用：1-2
粘结对：是
需要住房：5

我需要使年龄范围，最大采用等参数，而不是只是手动使文本加粗和写它。以下是我的JS：

var bunny = {
  animalName: 'Bunny',
  bondedPairs: '<b>Bonded Pairs: </b> Yes',
  maxAdopt: "<b>Max adopt: </b> 1-2",
  ageRange: "<b>Age Range: </b> 3 months - 2 Years",
  needingHomes: '<b>Needing homes: </b> 5',
  avatarSrc: '../images/bunny.jpg',
  note: 'note: We have lots of adorable fluffy loafs looking for their forever homes.',

  createProfile: function() {
    //creates a div to store their staff info
    var profile = document.createElement("div");
    //sets the class
    profile.className = "animalProfile";
    //creates a new image for the profile pic
    var avatar = document.createElement("img");
    //sets the source and name based on our object info
    avatar.src = this.avatarSrc;
    avatar.alt = this.animalName;
    //appends the image to the profile div
    profile.appendChild(avatar);
    //sets up the text
    var profileTxt = document.createElement("p");
    profileTxt.innerHTML = "<b>" + this.animalName + "</b><br />" +
      "</b><br />" + this.ageRange + "</b><br />" + this.maxAdopt +
      "  </b><br / > " + this.bondedPairs +
      "</b><br />" + this.needingHomes;

    //adds the text to the profile div
    profile.appendChild(profileTxt);
    //returns the completed profile
    return profile;
  }
}

document.getElementById("animal_list").appendChild(bunny.createProfile());

动物收养
我们要收养的动物
我们所有的动物都可以被领养到有责任感的主人的充满爱心和关怀的家中

这就是你要找的吗？与其说是使用了一个参数，不如说是对象键。因为我不知道你想从哪里得到你的参数。现在只需循环除avatarSrc和createProfile之外的所有对象键。这样做的好处是，您可以向其他动物添加更多属性，这些属性将自动显示

如果您有更多具有相同createProfile函数的动物，那么将该函数从对象中取出并仅在其自身上使用一次也是有意义的

var bunny={
“动物名称”：“兔子”，
“粘结对”：“是”，
“最大采用”：“1-2”，
“年龄范围”：“3个月-2岁”，
“需要住房”：“5”，
avatarSrc:“../images/bunny.jpg”，
注意：“我们有很多可爱的毛茸茸的面包在寻找它们永远的家。”，
createProfile:function（）{
//创建一个div来存储员工信息
var profile=document.createElement（“div”）；
//设置类
profile.className=“animalProfile”；
//为配置文件创建新图像
var avatar=document.createElement（“img”）；
//根据对象信息设置源和名称
avatar.src=this.avatarSrc；
avatar.alt=这个['Animal Name']；
//将图像附加到配置文件div
个人资料。儿童（阿凡达）；
//设置文本
var profileTxt=document.createElement（“p”）；
const keys=Object.keys（此）；
key.forEach（（key）=>{
if（this.hasOwnProperty（key）&&key！='avatarSrc'&&key！=='createProfile'）{
profileTxt.innerHTML+=''+key+'：''+此[key]+'
'；
}
});
//将文本添加到配置文件div
appendChild（profileTxt）；
//返回已完成的配置文件
回报曲线；
}
}
document.getElementById（“动物列表”）.appendChild（bunny.createProfile（））
看起来您需要能够显示一个或多个兔子的列表。因此，我建议您创建一个对象数组，并使用构造函数创建这些对象（可以使用ES6
class
语法）

此外，最好将访问HTML文档的代码与任何其他代码分开

为什么不使用模板文本语法（使用backticks）生成表示一只兔子的HTML呢。这可能是Bunny类的一种方法

下面是它的外观：


类兔子{
构造函数（animalName）{
this.animalName=animalName；
}
asHtml（）{
返回`

${this.animalName}


年龄范围：${this.ageRange}

绑定对：${this.bondedPairs}

需要住房：${this.needingHomes}

Max-adopt:${this.maxAdopt}


`;
}
}
//创造所有的兔子
常数兔子=[]；
让兔子；
兔子=新兔子（“兔子”）；
bunny.bondedparies=“是”；
bunny.maxAdopt=“1-2”；
bunny.ageRange=“3个月-2年”；
bunny.needingHomes=“5”；
bunny.avatarSrc=“../images/rabbit.jpg”，
兔子。推（兔子）；
兔子=新兔子（“松鼠”）；
bunny.bondedparies=“否”；
bunny.maxAdopt=“1-3”；
bunny.ageRange=“3个月-3年”；
bunny.needingHomes=“4”；
bunny.avatarSrc=“../images/squirrel.jpg”，
兔子。推（兔子）；
//在页面上显示它们
const list=document.getElementById（“动物列表”）；
for（let bunny of bunnies）list.insertAdjacentHTML（“beforeed”，bunny.asHtml（））
body{背景色：浅蓝色；}
#容器{边距：0自动；宽度：80%；}
标题{宽度：100%；文本对齐：居中；}
节{宽度：100%；文本对齐：居中；}
h1{颜色：海军蓝；字体系列：'Sofia'，草书；字体大小：2.5em；顶部填充：20px；}
p{字体系列：'Quicksand'，无衬线；字体大小：16pt；文本对齐：居中；}
.animalProfile{显示：内联块；背景色：rgba（255255,0.5）；}

我们要收养的动物
我们所有的动物都可以领养，以证明它们的爱心和关怀
拥有负责任业主的房屋

粗体部分看起来总是一样的。更合乎逻辑的是，这样的文本在HTML中是静态的，而不是对象值的一部分。为什么“note”不是粗体字？我该怎么做？答案是否符合你的需要？你能给我一些反馈吗？