append 带有动态值的 jQuery 中 div 的 href 标记

Question

var customlink= "<div style='text-align:left;'>some text is here";

customlink+="<a href='#' title='test link' class='class1' onclick='show('"+val1+"','"+val2+"','"+val3+"')';></a></div>"

When using the above code to create the hyperlink with dynamic value then hyperlink not created with dynamic values in single quotes. it give me the below result.

<a href="#" title="test link" class="class1" onclick="show(" 4','4','4')';=""></a>

what should I need to change in the above code?

Answer 1

The issue is due to the use of quotes within the arguments of the method call. You need to escape them using the \ character:

 var val1 = 1; var val2 = 2; var val3 = 3; var customlink = '<div style="text-align:left;">some text is here <a href="#" title="test link" class="class1" onclick="show(\'' + val1 + '\',\'' + val2 + '\',\'' + val3 + '\')";>Link...</a></div>'; document.querySelector('div').innerHTML = customlink; function show(a, b, c) { console.log(a, b, c); }

 <div></div>

Better yet avoid the problem entirely and improve the code quality by using data attributes along with an unobtrusive event handler:

 let val1 = 1; let val2 = 2; let val3 = 3; let customlink = `<div style="text-align: left;">some text is here <a href="#" title="test link" class="class1" data-val1="${val1}" data-val2="${val2}" data-val3="${val3}">Link...</a></div>`; let div = document.querySelector('div'); div.innerHTML = customlink; div.querySelector('a').addEventListener('click', e => { var elData = e.target.dataset; console.log(elData.val1); console.log(elData.val2); console.log(elData.val3); });

 <div></div>

Answer 2

I think you can do like this.

 function generatetage(val1,val2,val3){ var customlink= "<div style='text-align:left;'>some text is here"; customlink+=`<a href='#' title='test link' class='class1' onclick="show('${val1}','${val2}','${val3}')">testlink</a></div>` document.getElementById("tagarea").innerHTML=customlink; }

 <div id="tagarea"></div> <button onclick="generatetage(4,4,4)">testButton</button>