js怎么添加中间有空格的属性？

Question

Ok, so here's part of a code. I got it from a website. I was given the code so I can embed it on another website. It's a live chat btw.

I need to inject the JS embed code through JS. Here's part of the code. (I deleted some unnecessariy info)

<script id="abcd" data-cfasync="false" async src="//ab.abc.com/js/gz/emb.js" style="width: 272px;height: 440px;">{"handle":"nitrotype","arch":"js","styles":{"a":"0084ef","b":100,"c":"FFFFFF","cvh":30}}</script>

I tried to do it using attributes.

var x = document.createElement("script");
    x.setAttribute("id", "abcd"
    x.setAttribute("data-cfasync = "false";
    x.setAttribute("async src

Well.. right there. async src it doesn't work. JS doesn't recognize that. So I'm wondering if there is a work around this.

If you guys have any ideas, please let me know. thx.

And, by the way, the > after 440px is part of it. That's the other thing.

Answer 1

While it may look like the attribute is called async src due to async not having an = after it, they are actually two separate values. As perthe HTML spec , an attribute without a value defaults to the empty string. This is essentially for boolean attributes (either it's there or it's not), such as async and defer for script tags, or disabled for input tags. So, you'd just set two attributes:

x.setAttribute("async", "");
x.setAttribute("src", "//ab.abc.com/js/gz/emb.js");