We Keep Coding

how to add multiple javascript variable in html a href tag

I write this javascript but it's showing error. can anyone solve this how to write it correctly?
actually I want to show button and on the button, I want link
pop_str = pop_str + 'Compare Now!<button>';

Remove the quote on '/' => '/
pop_str = pop_str + 'Compare Now!<button>';

To simplify this you could use the back tick character `:
pop_str = `${pop_str}<button class="btn master_btn">Compare Now!<button>`
You simply place your variables within ${variable}

HighCharts + xAxis label formatter

I'm running into this weird and wonderful issue with the xAxis.labels.formatter function within highcharts JS.
I wanted to add a lightbox icon to the xAxis labels of the chart as following:
return '<div class="label">'
+'<a class="lightbox" href="http://www.google.com" data-lightbox="iframe" data-plugin-options=\'{"type":"iframe"}\'>ICON</a>'
+'</div>';
However when rendering this chart the html code shows me the following output:
<div class="label">
<a class="lightbox" href="http://www.google.com" data-lightbox="iframe" data-plugin-options="{"type":"iframe"}">ICON</a>
</div>
The problem is with the single quotes being rendered into double quotes
data-plugin-options="{"type":"iframe"}"
instead of
data-plugin-options='{"type":"iframe"}'
No matter what I try, I can't seem to prevent this from happening.
Things I have tried:
use simple escaping with \'
created a var and passing it into the return string
used .replace(/['"]+/g, '')
Could someone please point me in the right direction as it's driving me slowly crazy, thanks all
UPDATE AFTER FEEDBACK
thank you for your reply, the problem is not the actually single quotes inside of the data-plugin-options attribute but around it, so for example it renders: data-plugin-options="{"type":"iframe"}" instead of data-plugin-options='{"type":"iframe"}', I have found out that even if I would add a fake html element e.g foo=bar, it will render this as foo="bar", so it automatically adds the double quotes, within the xAxis label formatter.
Please see my modified JSFiddle (http://jsfiddle.net/g6yehxeo/1/), and inspect the element of the icon label on the xAxis, you will find that it renders with quotes, even while there are none in the original code ? Any idea of how to prevent this, as the lightbox does not seem to work without these.
Thanks all

You need to properly escape the string that goes into the data-plugin-options attribute. More info: https://stackoverflow.com/a/9189067/1869660
formatter: function () {
function escapeAttr(str) {
var div = document.createElement('div');
div.setAttribute('data-dummy', str);
return /\"(.*)\"/.exec(div.outerHTML)[1];
}
var options = { type: 'iframe'},
optionsAttr = escapeAttr(JSON.stringify(options));
return '<div class="label">'
+ '<a class="lightbox" href="http://www.google.com" data-lightbox="iframe" data-plugin-options="' + optionsAttr + '">ICON</a>'
+ '</div>';
},
http://jsfiddle.net/g6yehxeo/
You can also use the built-in escape() method instead of our homemade escapeAttr(), but then whoever reads the attribute later needs to unescape() the value first to get valid JSON.

Replacing apostrophe in string

I'm using phonegap to share an article via WhatsApp.
The code for the button is as follows:
shareArticle += '<li class="rrssb-whatsapp"><a href="javascript: void(1)" onclick="window.plugins.socialsharing.shareViaWhatsApp(\''+$('.article_title').html().replace(/'/g, "&apos;")+'\', null, \'http://www.myaddress.com/showArticle-'+articleId+'\', function() {console.log(\'share ok\')}, function(errormsg){alert(errormsg)});" class="popup" data-action="share/whatsapp/share">';
shareArticle += '<span class="rrssb-icon"><!-- Icon in SVG --></span>';
shareArticle += '</a></li>';
The part that I'm asking about is this:
onclick="window.plugins.socialsharing.shareViaWhatsApp(\''+$('.article_title').html().replace(/'/g, "&apos;")+'\', null, \'http://www.myaddress.com/showArticle-'+articleId+'\', function() {console.log(\'share ok\')}, function(errormsg){alert(errormsg)});"
The button is not working when there is an apostrophe in the title.
The strangest thing is that if I replace &apos; with " it work perfectly (even thought the result is wrong).
Doe's anybody has any idead why &apos; fails?

Thank you all for your support.
The solution is to change the apostrophe to another sign that doesn't break the string.
So what I did is:
$('.opinion_content_title').html().replace(/'/g, "′")
Again, thank you all.

The named character reference ' (the apostrophe, U+0027) was introduced in XML 1.0 but does not appear in HTML. Authors should therefore use ' instead of ' to work as expected in HTML 4 user agents.

concatenate variable with background style broken in my case

$("#home").append('<div style="background:url("http://example.com/images/'+obj[i]+'.jpg")"');
what's wrong here? I think I'd closed it properly..

You have issues with mis-matching quotes - you need to escape the double quotes in the url properties' value, or remove them. You have also not closed the div tag properly. Try this:
$("#home").append('<div style="background:url(http://example.com/images/' + obj[i] + '.jpg)"></div>');
Example fiddle

the problem issued with the string you're building:
'<div style="background:url("http://example.com/images/'+obj[i]+'.jpg")"'
let's assume obj[i]==1.
your div will look like this:
<div style="background:url("http://example.com/images/1.jpg")"
notice two important isssues:
the div has no closing ('>' character)
the style attribute is "background:url(" - having same type of quotes prevent the navigator to understand you.
try use:
$("#home").append('<div style="background:url(/'http://example.com/images/'+obj[i]+'.jpg/')">');
good luck!

Jquery, Escaping url with variable

trying to escape and html for appending in jquery with adding a dynamic variable that i am bringing in with ajax and I seem to not be able to get the escaping correct. Here is what I have -
$("<div><div class='presiImg' style='background: url(/\'/gleam\/public\/images\/itPrecedents\/" + keep.logo + "');'></div></div>").appendTo(".myDiv');
I am unsure how to escape this correctly so I can use the variable. Thanks.

You've got a couple issues here:
You're escaping the forward slashes in your URL and that is not necessary
You are using inconsistent quotes in your .appendTo()
As a suggestion, when I append raw HTML using JS/jQuery I try to use the single-quote and the JavaScript quote, and then use the double-quotes in the HTML. For me it is just easier to see that way. Also, the single-quote in the CSS url is not required, and is perhaps confusing the matter.
Anyway, if you change your line to the following it will work:
$('<div><div class="presiImg" style="background: url(\'/gleam/public/images/itPrecedents/' + keep.logo + '\');"></div></div>').appendTo('.myDiv');
There is a runnable example below if you want to see it in action:
$(function() {
var keep = { logo : "test.jpg" };
$('<div><div class="presiImg" style="background: url(\'/gleam/public/images/itPrecedents/' + keep.logo + '\');"></div></div>').appendTo('.myDiv');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myDiv"></div>

try
$("<div />",{
"class":"presiImg",
"style":"background: url(/gleam/public/images/itPrecedents/"+keep.logo+")"
}).appendTo(".myDiv");