JavaScript DOM向空footer插入带文本href的cite元素失败

原代码核心错误点 #

• 文本赋值逻辑错误：HTML元素不存在名为text的内置属性，无法通过setAttribute("text", 内容)的方式为元素设置可见文本，元素文本需要通过textContent属性直接赋值。
• innerHTML调用方式错误：innerHTML是DOM元素的字符串类型属性，并非可执行的方法，直接调用ftr.innerHTML(cite)属于无效语法，且将DOM对象传入该属性会被自动序列化为无意义的[object HTMLElement]字符串。
• 节点插入方式错误：向父元素中添加已创建的DOM子节点，应使用DOM节点操作API，不能通过属性赋值的方式传入节点对象。

符合约束条件的实现代码 #

// 创建cite元素节点
const cite = document.createElement("cite");
// 设置cite元素的显示文本
cite.textContent = "Information and photos from Wikipedia";
// 为cite元素设置指定的href属性
cite.setAttribute("href", "https://en.wikipedia.org/wiki/Bumblebee");
// 获取页面中已存在的空footer元素
const footer = document.getElementsByTagName("footer")[0];
// 将cite节点追加到footer的子节点列表中
footer.appendChild(cite);

说明：上述实现完全符合题目给出的约束：不修改原有静态HTML文件的内容、不在JS代码中直接拼接写入HTML标签、不使用document.write方法。需要注意的是，根据HTML语义规范，原生<cite>元素本身不内置href属性的原生支持，我们通过setAttribute为其设置自定义href属性的操作，完全匹配题目提出的功能要求，可正常将目标cite元素插入空footer标签内部。

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