Normally we do not use HTML code within out scripting code, as it causes many maintenance headaches.
One possible way is to create the elements from within JavaScript itself.
function createEl(el, attrs) {
var el = document.createElement(el);
Object.keys(attrs).forEach(function(attr) {
el.setAttribute(attr, attrs[attr]);
});
return el;
}
var pData = {
Pr_Id: 1234
};
var els = document.createDocumentFragment();
var url = "frmEnviarPorCorreo.aspx?Pr_id=" + pData.Pr_Id;
var a = createEl("A", {
href: "#",
onclick: "window.open('" + url + "')"
});
var img = createEl("IMG", {
class: "imgShare",
src: "images/icoEmail.png"
});
a.appendChild(img);
var li = document.querySelector("#someListItem");
li.appendChild(els);
The trouble with this though is that you have the same maintenance issues as before.
A better solution is to have the HTML code on the HTML page itself, and use scripting to update the appropriate parts of the HTML code.
<li>
<a id="newWindow" href="frmenviarporcorreo.aspx">
<img class="imgShare" src="images/icoEmail.png">
</a>
</li>
var pData = {
Pr_Id: 1234
};
var a = document.querySelector("#newWindow");
a.setAttribute("onclick", "window.open('" + a.href + "?pr_id=" + pData.Pr_Id + "', '_blank', 'location=yes,height=570,width=520,scrollbars=no,status=no')");
a.setAttribute("href", "#");
That way the HTML and the JavaScript are used for what they’re best at, with the JavaScript being used to adjust the behaviour of the HTML code.
Even better than this though is to use JavaScript to attach an onclick event to the link:
<li>
<a id="newWindow" href="frmenviarporcorreo.aspx">
<img class="imgShare" src="images/icoEmail.png">
</a>
</li>
var pData = {
Pr_Id: 1234
};
var a = document.querySelector("#newWindow");
a.addEventListener("click", function(evt) {
evt.preventDefault();
window.open(this.href + "?pr_id=" + pData.Pr_Id, '_blank',
'location=yes,height=570,width=520,scrollbars=no,status=no');
});
This is the best of all the given solutions so far.