how to append html element via jquery?

Question

i used jquery to append html content with onclick function from jquery , but my content doesn't render properly , please help me to fix this.

my code is

 $.each(_fileName, function (i, item) {
                imgTag += "<div class='DivColumn-6'>";
                imgTag += "<img src=" + _ImgPath + "Icons/" + _fileName[i]['SenIcon'] + ".jpg class='imgSenIcons'/>";

                imgTag += "<span class='spnSensorName' onclick=calSensorPage('" + _fileName[i]['SenFnCal'];
                imgTag += "','" + _fileName[i]['SensorNmtxt'];
                imgTag += ");>" + _fileName[i]['SensorNmtxt'];
                imgTag += "</span></div>";
            });

            $("#divSensorMnu").append(imgTag);

Out is render like this :

<span class="spnSensorName" onclick="calSensorPage('CamshaftPosition','CAMSHAFT" position="" sensor);="">CAMSHAFT POSITION SENSOR</span>

I need output like this.

 <span class="spnSensorName" onclick="calSensorPage('CamshaftPosition','CAMSHAFT position sensor')">CAMSHAFT POSITION SENSOR</span>

i know some missing quotes. please help me to fix.

sorry for my english.

thanks

Answer 1

The issue is due to your use of mis-matching and un-escaped quotes within the span string you generate. Try this:

 var _fileName = [{ "Sno": 1, "SensorNmtxt": "RAIL PRESSURE SENSOR", "SenFnCal": "RailPressure", "SenIcon": 1 }]; var imgTag = '', _ImgPath = "/"; $.each(_fileName, function(i, item) { imgTag += "<div class='DivColumn-6'>"; imgTag += "<img src=" + _ImgPath + "Icons/" + _fileName[i]['SenIcon'] + ".jpg class='imgSenIcons'/>"; imgTag += '<span class="spnSensorName" onclick="calSensorPage(\\'' + _fileName[i]['SenFnCal']; imgTag += '\\',\\'' + _fileName[i]['SensorNmtxt']; imgTag += '\\')";>' + _fileName[i]['SensorNmtxt']; imgTag += '</span></div>'; }); $("#divSensorMnu").append(imgTag); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divSensorMnu"></div> 

However you should note that using on* event attributes is a very outdated approach, and makes the HTML and associated JS code a mess to work with - as you can see from the concatenation nightmare above.

A much better solution is to store the required metadata in the element using data attributes and add an unobtrusive event handler, something like this:

 var _fileName = [{ "Sno": 1, "SensorNmtxt": "RAIL PRESSURE SENSOR", "SenFnCal": "RailPressure", "SenIcon": 1 }] var _ImgPath = "/"; var html = _fileName.map(function(item) { return `<div class="DivColumn-6"><img src="${_ImgPath}Icons/${item.SenIcon}.jpg class="imgSenIcons"/><span class="spnSensorName" data-fncal="${item.SenFnCal}">${item.SensorNmtxt}</span></div>`; }); $("#divSensorMnu").append(html); $('.spnSensorName').click(function() { var $el = $(this) var fncal = $el.data('fncal'); var nmtxt = $el.text(); console.log(fncal, nmtxt); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divSensorMnu"></div> 

Answer 2

try this

demo : https://codepen.io/anon/pen/XEwzaN

var SensorNmtxt = "CAMSHAF position sensor";
var SenFnCal = "CamshaftPosition";


var  imgTag = "<div class='DivColumn-6'>";
imgTag += '<img src=123Icons/123.jpg class="imgSenIcons"/>';
imgTag += '<span class="spnSensorName" onclick="calSensorPage(\'' + SenFnCal + '\',\'' + SensorNmtxt + '\')">' + SensorNmtxt;
imgTag += '</span></div>';

$("#divSensorMnu").append(imgTag);
console.log(imgTag)


function calSensorPage (){
  console.log("hi")
}

Answer 3

Hi here is your corrected js you're missing a ' right here i added it, because you were missing it it didn't finish the onclick tag :

   imtTag += '<span class="spnSensorName" onclick="calSensorPage(\'' + _fileName[i]['SenFnCal'];
   imgTag += '\',\'' + _fileName[i]['SensorNmtxt'];
   imgTag += '\');">' + _fileName[i]['SensorNmtxt'];
   imgTag += '</span></div>';

Just change all you double quote by simple and add " " for onclick method