Setting HTML Style Using Javascript String Literal - Colon Breaks String Variable

Question

I'm trying to set the style on an HTML element before appending it to the page by passing the style tag through a variable in a JavaScript string literal.

So my code looks like this:

const STYLE = "font-weight: bold; color: crimson; background-color: red;"
const item = `<p class="text" style=${STYLE}>Some Text</p>`
const position = "beforeend";
list.insertAdjacentHTML(position, item);

When I run it though, the HTML on the page looks like this - the quotation mark on the style tag ends after the first colon. Is there any way to get the full string into the style tag?

<p class="text" style="font-weight:" bold; color: crimson; background-color: red;>Some Text</p>

Deykun · Accepted Answer · 2020-06-07 07:58:09Z

3

const item = `<p class="text" style=${STYLE}>Some Text</p>

You should wrap ${STYLE} with ":

const item = `<p class="text" style="${STYLE}">Some Text</p>

Browsers for attributes values without " are adding them themselves and closing them before the first space in the string. That's why "font-weight:" was wrapped here:

style="font-weight:" bold; color: crimson; background-color: red;>

edited Jun 7, 2020 at 7:58

answered Jun 7, 2020 at 7:51

Deykun

1,26011 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Setting HTML Style Using Javascript String Literal - Colon Breaks String Variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related