如何用JavaScript创建HTML元素并为其设置属性？

我正在完成一项学校作业，要求创建一个HTML元素并且为其添加一个属性，但我对实现方法感到困惑。附上我的代码和问题相关图片，恳请各位提供帮助。
（注：图片1为作业要求截图，图片2为本人代码截图）

给HTML元素添加属性的操作很直观，直接在元素的起始标签内补充「属性名="属性值"」即可，下面给你几个实用示例：

• 创建带class属性的段落元素：

<p class="highlight">这是一段带有高亮类的文本</p>

这里<p>是段落元素，class="highlight"就是为它添加的属性，属性名是class，属性值是highlight。

• 创建带href和target属性的链接元素：

<a href="https://example.com" target="_blank">打开示例网站</a>

<a>是链接元素，href指定跳转地址，target="_blank"设置在新窗口打开链接，多个属性之间用空格分隔就行。

• 创建带type和placeholder属性的输入框元素：

<input type="text" placeholder="请输入内容">

这类自闭合元素（不需要写结束标签），直接在标签内添加属性即可。

如果你的作业有特定的元素或属性要求，照着这个逻辑套就行：

1. 先写元素的起始标签（比如<div>、<span>）
2. 在标签内部、闭合尖括号前，添加属性，格式为「属性名="属性值"」
3. 非自闭合元素要补上结束标签（比如<div>内容</div>）

内容的提问来源于stack exchange，提问作者Bandito