使用document.createElement设置name属性无效，如何不使用id修复？

直接通过element.name = "xxx"给<p>元素设置name属性无效，核心原因是并非所有HTML元素的DOM对象都将name属性暴露为可直接赋值的接口，<p>元素就属于这类——直接赋值只会给DOM对象添加一个自定义JS属性，不会同步到HTML标签的name属性上。

以下是两种无需使用id的修复方案：

方案1：使用setAttribute()显式设置HTML属性 #

修改代码中设置name属性的部分，用setAttribute()方法替代直接赋值，这是通用的HTML属性设置方式，适用于所有元素：

var element = document.createElement("p");
element.className = "hello-there";
element.innerText = "It works";
element.setAttribute("name", "hello-there-name"); // 替换原赋值语句
document.getElementById("main").appendChild(element);
console.log(document.querySelector("p").getAttribute("name")); // 输出"hello-there-name"

<div id="main"></div>

方案2：创建元素时传入属性配置对象 #

利用document.createElement的第二个参数，直接传入包含属性的配置对象，写法更简洁：

var element = document.createElement("p", {
  className: "hello-there",
  innerText: "It works",
  name: "hello-there-name"
});
document.getElementById("main").appendChild(element);
console.log(document.querySelector("p").getAttribute("name")); // 输出"hello-there-name"

<div id="main"></div>

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