How does injecting {{msg.payload}} tag works in HTML?

It feels like sometimes it works, sometime it doesn't, and sometimes it breaks. My template node goes like this :

<div id = '{{}}' style = 'background-image : url("/{{msg.background}}")  !important;'>
        <div onclick="{{msg.url}}, '_blank')"  style = "background-color : {{msg.payload}};">

Everything works other than the, no matter how I try to write it. I always find myself trying out every combination possible, with or without curly brackets, with or without quotation marks, etc, until I find the one that works, don't know why the results seem so inconsistent.

Does anyone know what I'm doing poorly here? expects a string (put quotes around it)'{{msg.url}}', '_blank')

Sorry I wasn't very clear!

I've tried to put quotes around it, and it simply breaks everything. My entire DIV seems to break when I change it to quotes, and the link doesn't work appropriately either.

<div onclick="'{{msg.url}}', '_blank')" id = '{{}}' style = 'background-image : url("/{{msg.background}}")  !important;'>

The moment I add the quotation marks, the UI breaks and every other tags show as {{}} and {{msg.background}} instead of the value they hold. Without trying to parse the msg.url, everything works perfectly.

you will have to show us what is in msg.url - it may not be escaped and causing HTML issues.

A better solution would be to attach the on click hander in script or add use an anchor <a href="{{msg.url}}" target="_blank"></a>

Also, please be clear on the type of template. an orange template or the UI-template?

My apologies, I am new to Node-RED and didn't know about the orange template : I'm using the UI-template node.

The msg.url is a string set to

For the record, I did just decide to switch to an anchor, out of frustration. I'm just too curious as to why sometimes the msg. values don't get parsed properly, as it's been a problem I've been having many times.