JavaScript函数document.createElement(tagName[, options])未按预期工作。

Question

我需要在一行JS代码中创建一个包含链接的元素。 这个不起作用：

var gg = document.createElement("a", {href : "http://someurl.com"})

这会导致： 虽然MDN上说： var element = document.createElement(tagName[, options]); options是一个可选的ElementCreationOptions对象。如果定义了此对象并且具有is属性，则所创建元素的is属性将使用该属性的值进行初始化。 如果对象没有is属性，则值为null。 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement 这个ElementCreationOptions对象是某种奇异的对象吗？我尝试了许多关于该对象的不同组合，但都没有起作用，并且结果中总会出现奇怪的" is "属性！我在规范中也找到了它：https://www.w3.org/TR/custom-elements/#attr-is，但不知道它实际上如何工作。

附注： 这个也不行： var gg = document.createElement("a").setAttribute("href" , "someurl.com") 结果是未定义。

- Garegin

---

options 不是属性对象。 - Bergi

为什么需要在一个命令中完成它？ - Frxstrem

只需使用 var gg = document.createElement("div"); gg.setAttribute("href" , "someurl.com");。如果需要将其作为单个表达式，请将其放入帮助函数中并调用该函数。 - Bergi

请注意，您应该使用document.createElement("div")而不是"a"。将其分成两行，它将按照您的要求执行。（setAttribute不会将元素返回给gg） - Alex K.

我已经阅读了文档和这行文字：“如果此对象被定义并具有“is”属性，则创建的元素的“is”属性将使用此属性的值进行初始化”，但我不知道它的含义。这个问题的答案解释了它：https://dev59.com/xl4c5IYBdhLWcg3w3tgu。提示：HTML元素的“is”属性是一个提议的属性，从未被实现过。据我所知，这个想法是允许用户向元素添加超类。 - Elise van Looij

Answer 1

我知道这是一个古老的问题（相对而言），@Luke-Weaver的答案已经给出了一个涉及jQuery的路线，但以下选项既可以实现@Garegin最初请求的内容，同时还可以使用vanilla JS提供的createElement方法的模糊参数名称所需的功能。

gg = Object.assign(document.createElement('a'),{href:'http://someurl.com',innerText:"Bonus points?"});

这个解决方案会在一行中创建'<a href="http://someurl.com">奖励积分？</a>'。 虽然更长，但以下内容可能效果更好：

function oneLineTag(tag,options){
  return Object.assign(document.createElement(tag),options);
}
let quickAnchor = {
  href:'http://someurl.com',
  innerText: "I'm still answering a 3-year-old question"
}

现在您有选择的选项

gg = oneLineTag('a',quickAnchor);

- Sam Hughes

---

class关键字似乎在第二个参数中无法正常工作，我不确定原因。 - Hatefiend

你需要在第二个参数中使用键“className”。它是一个单独的字符串，由空格分隔。稍后你可以通过与该字符串交互或者通过提供一些有用方法的类数组构造函数classList属性来与该元素交互。MDN上的className文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/className MDN上的classList文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList - Sam Hughes

Answer 2

您不能使用第二个（ElementCreationOptions）参数添加HTML属性。

var element = document.createElement(tagName[, options]);

在文档中清楚地提到，第二个可选参数是一个包含单个属性的对象，即is。如下所示：

一个可选的ElementCreationOptions对象，其中包含一个名为is的属性，其值是使用customElements.define()定义的自定义元素的标记名称。为了与Custom Elements规范的先前版本保持向后兼容性，一些浏览器将允许您在此处传递一个字符串，其中字符串的值是自定义元素的标记名称。有关如何使用此参数的更多信息，请参见扩展本机HTML元素。

至于你的问题，解决方案可以如下：

var body = document.body || document.getElementsByTagName('body')[0];
var anchor = document.createElement('a');
anchor.href = 'http://someurl.com';

var text = document.createTextNode("http://someurl.com");  
anchor.appendChild(text);
body.appendChild(anchor);

如果有用，请告诉我。

- Naveenk

---

OP希望在一行中实现。 - ThomasRones

Answer 3

也许这对任何人都有帮助

((a) => !(a.href = '#link-here') || a )(document.createElement('a'))

逐步操作

我们从匿名函数开始，该函数使用参数调用自身。

((param) => /* do some with arg */)(initParam)

接下来，我们将初始化一个A元素并对其进行一些操作。

((LinkElement) => /* do some with new element */)(document.createElement('a'))

最后，我们给链接添加href属性，如下所示：

!(a.href = '#link-here') || a

首先我们在()中添加href。它会返回href的值，如果不为false，我们将使用||返回带有这些更改的a元素。

- Roman Zenia

Answer 4

我也想要这个功能，但发现createElement中的"option"并不是为此而设。因此，我自己编写了createElement函数。

function createElement(name, options) {
    let element = document.createElement(name);
    for (let key in options) {
        element.setAttribute(key, options[key]);
    }
    return element;
}

你可以像这样使用它：

let main = document.getElementById("main");
let input_object = {
    type: "text",
    id: "id-1",
    name: "name",
    class: "cell",
    placeholder: "123456",
    min: "5",
    max: "50",
};

main.appendChild(createElement("input", input_object));

这将返回设置属性的HTML元素。您只需要将其附加到其他元素即可。您还可以通过更改某些属性值并再次使用它来创建新的HTML元素来重复使用input_object。

input_object.id = "id-2";
input_object.placeholder = "9874563"
input_object.readOnly = "";
main.appendChild(createElement("input", input_object));

input_object.id = "name-4";
input_object.placeholder = "qwertyu"
delete input_object.readOnly;
main.appendChild(createElement("input", input_object));

- Donatas

Answer 5

试着这样做。

var gg = document.createElement("div")
 document.body.appendChild(gg);
var att = document.createAttribute( "href" );
att.value = "someurl.com" ;
gg.setAttributeNode(att); 

- Taiti

---

是的，那可能会起作用。我也可以用两行代码让它工作，但正如我在问题中标记的那样，我需要在一行中完成它。 - Garegin

Answer 6

我相信createElement函数的第二个参数仅适用于自定义元素。相反，您可以使用jQuery的.attr来创建/设置属性，如下所示：

var gg = $(document.createElement("div")).attr("href", "someurl.com");

如果你不使用jQuery，你可能会很倒霉（至少如果你试图将它全部放在一行上）。我本来会建议使用.setAttribute()，但我注意到你不能将其链接到对象构造函数的末尾，而且我还没有找到解决方法。

- Luke Weaver