In javascript, how can I create element which has many attributes with createElement() in one line? [duplicate]

Question

`<div class="check"><input type="checkbox" name="buy" value="260" checked="" onclick="javascript:basket.checkItem();">&nbsp;</div>

this is element that I want to make by createElement(). I want to know is there anyway complete this in one command? length doesn't matter.

eyecatchUp · Accepted Answer · 2022-01-28 09:02:14Z

7

If you want a one-liner, you could use:

Object.assign(document.createElement('div'), {className: 'check', innerHTML: '<input type="checkbox" name="buy" value="260" checked="" onclick="javascript:basket.checkItem();">&nbsp;'})

Or, better readable:

Object.assign(document.createElement('div'), {
  className: 'check',
  innerHTML: '<input type="checkbox" name="buy" value="260" checked="" onclick="javascript:basket.checkItem();">&nbsp;'
})

answered Jan 28, 2022 at 9:02

eyecatchUp

10.7k5 gold badges59 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sam Hughes Over a year ago

Why use innerHTML, when you could instead append elements via DOM? You get linter/checker support that way.

eyecatchUp Over a year ago

@SamHughes Just because OP asked for a one-line solution.

Sam Hughes Over a year ago

I mean, the arbitrary one-line restriction is as crazy as it is unconstrained. Using an IIF approach, you've got it created, properties assigned, and then same for each child. for instance:

toldYouSo = (eMaker, head, ...fam) => {head = eMaker(head); fam.forEach(c=>head.appendElement(eMaker(c)); return head;})(tagData=>object.assign(document.createElement(tagData.tag, tagData), {tag: "div", className: "check"}, {tag: "input", type: "checkbox", name: "buy", value: "260", checked: "", onclick: "javascript:basked.checkItem();"})

... Lordy, I miss JS. Typechecking is nice, but Golang is hell.

Collectives™ on Stack Overflow

In javascript, how can I create element which has many attributes with createElement() in one line? [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related