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属性将使用此属性的值初始化。如果对象没有属性，则该值为null。 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

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

PS：这也不起作用：

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

导致未定义。

Answer 1

看起来Juhana是对的，我起初并不理解规范，所以你无法通过options参数添加任意元素属性。谢谢大家回答！

Answer 2

以这种方式试试。

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

Answer 3

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

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

如果你不使用jquery，你可能会失去运气（至少如果你想在一条线上完成所有这一切）。我本来会说使用.setAttribute（）但是我注意到你不能将它链接到一个对象构造函数的末尾，并且还没有找到解决方法。

Answer 4

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

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

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

包含名为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 5

我得到（相对）这是一个古老的问题，@ Luke-Weaver的答案已经给出了一个涉及jQuery的路线，但是以下是一个选项，既可以实现@Geragin最初的要求，又可以给他提供以下功能：在使用香草JS时，他想从createElement方法的含糊参数名称中获取。

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);

Javascript函数document.createElement（tagName [，options]）不能按预期工作

5 个答案: