Javascript function document.createElement(tagName[, options]) doesn't work as intended

Question

I need to create <a href="http://someurl.com"></a> element in one js code line

this doesn't work:

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

this result in: <a is="[object Object]"></a>

Thought MDN says: var element = document.createElement(tagName[, options]);

options is an optional ElementCreationOptions object. If this object is defined and has an is property, the is attribute of the created element is initalized with the value of this property. If the object has no is property, the value is null. https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

is this ElementCreationOptions object some sort of exotic object? I tried many various combinations around this object but nothing works and always in results i see that strange is property! I also found it in specification: https://www.w3.org/TR/custom-elements/#attr-is but no idea how it actually works.

ps: this doesn't work either:

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

result in undefined.

Answer 1

I get that this is an ancient question (relatively), and @Luke-Weaver's answer already gave a route involving jQuery, but the following is an option that both accomplishes what @Garegin originally requested, while still giving him the functionality that he wanted from the createElement method's ambiguous parameter name, while using vanilla JS.

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

This solution creates '<a href="http://someurl.com">Bonus points?</a>' on one line. It's longer, so the following might work better:

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"
}

and you now have the option of

gg = oneLineTag('a',quickAnchor);

Answer 2

You can not use the second ( ElementCreationOptions ) parameter to add html attributes.

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

It's clearly mentioned in the documentation that the second optional parameter is an object containing single property i.e. is. As we can see below,

An optional ElementCreationOptions object containing a single property named is, whose value is the tag name for a custom element previously defined using customElements.define(). For backwards compatibility with previous versions of the Custom Elements specification, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name. See Extending native HTML elements for more information on how to use this parameter.

And coming to your question, the solution can be as below,

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

Let me know if it works.