Javascript 函数 document.createElement(tagName[, options]) 无法按预期工作

Question

我需要在一个js代码行中创建<a href="http://someurl.com"></a>元素

这不起作用：

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

这个结果是：<a is="[object Object]"></a>

思想 MDN 说： var element = document.createElement(tagName[, options]);

options 是一个可选的 ElementCreationOptions 对象。如果此对象已定义并具有is 属性，则创建元素的is 属性将使用此属性的值初始化。如果对象没有is 属性，则值为空。 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

这个 ElementCreationOptions 对象是某种奇异的对象吗？我围绕这个对象尝试了许多不同的组合，但没有任何效果，结果总是我看到那个奇怪的is 属性！我还在规范中找到了它：https://www.w3.org/TR/custom-elements/#attr-is，但不知道它实际上是如何工作的。

ps： 这也不起作用：

var gg = document.createElement("a").setAttribute("href" , "someurl.com")

导致未定义。

Answer 1

我知道这是一个古老的问题（相对而言），@Luke-Weaver 的回答已经给出了一条涉及 jQuery 的路线，但以下是一个选项，既可以完成@Garegin 最初要求的功能，又可以为他提供以下功能他想从 createElement 方法的模棱两可的参数名称中，同时使用 vanilla JS。

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

此解决方案在一行上创建'<a href="http://someurl.com">Bonus points?</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);

Answer 2

您不能使用第二个 (ElementCreationOptions) 参数来添加 html 属性。

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

文档中明确提到第二个可选参数是一个包含单个属性的对象，即 is。正如我们在下面看到的，

包含一个名为 is 的单个属性的可选 ElementCreationOptions 对象，其值是先前使用 customElements.define() 定义的自定义元素的标签名称。为了向后兼容以前版本的自定义元素规范，一些浏览器将允许您在此处传递字符串而不是对象，其中字符串的值是自定义元素的标签名称。有关如何使用此参数的更多信息，请参阅扩展原生 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);

让我知道它是否有效。

Answer 3

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

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

如果您不使用 jquery，您可能会不走运（至少如果您试图将所有内容集中在一行上）。我会说使用 .setAttribute() 但是我注意到你不能将它链接到对象构造函数的末尾并且还没有找到解决这个问题的方法。

Answer 4

试试这个方法。

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