Escaping Quotes does not work in JavaScript innerHTML

Question

I have got a quite bad "quoting situation" at the moment. I am working inside an innerHTML and inside this i want to call a function on the onClick-Event, which leaves me with the following:

modalEl.innerHTML = '<form>'+
     '<legend>Gruppe bearbeiten</legend>'+
     '<div class="mui-textfield">'+
        '<input id="groupName" type="text" value="'+name+'">'+
        '<label>Gruppenname</label>'+
     '</div>'+                                        
     '<br/>'+
     '<div class="mui-textfield">'+
        '<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+
        '<label>Beschreibung</label>'+
     '</div>'+                                        
     '<br/>'+
     '<div class="mui-textfield">'+
     '<label>Geräte hinzufügen</label>'+
     '<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+
     '<option value="0"></option>'+
     '</select>'+
      '</div>'+
      '<br>'+
      '<div class="outterformbuttons">'+
         '<div class="formbuttons">'+
             '<button type="button" class="mui-btn mui-btn--raised" onclick="sendUpdatedGroup(id, document.getElementById(&quot;groupName&quot;).value, document.getElementById(&quot;groupDesc&quot;).value)">Speichern</button>'+
             '<button type="button" class="mui-btn mui-btn--raised" onclick="deactivateOverlay()">Abbrechen</button>'+
          '</div>'+
      '</div>'+
  '</form>';

I already tried escaping the quotes and using HTML-Quotes, but neither worked.

Answer 1

Instead of HTML encoding the single quotes, just JavaString escape your single quotes.

'<button type="button" class="mui-btn mui-btn--raised"
  onclick="sendUpdatedGroup(id, document.getElementById(\'groupName\').value,
  document.getElementById(\'groupDesc\').value)">Speichern</button>'+

If you don't want to get into escaping hell , don't use event handlers as HTML attributes (which we stopped doing about 10 years ago).

modalEl.innerHTML = '<form>'+
 '<legend>Gruppe bearbeiten</legend>'+
 '<div class="mui-textfield">'+
    '<input id="groupName" type="text" value="'+name+'">'+
    '<label>Gruppenname</label>'+
 '</div>'+                                        
 '<br/>'+
 '<div class="mui-textfield">'+
    '<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+
    '<label>Beschreibung</label>'+
 '</div>'+                                        
 '<br/>'+
 '<div class="mui-textfield">'+
 '<label>Geräte hinzufügen</label>'+
 '<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+
 '<option value="0"></option>'+
 '</select>'+
  '</div>'+
  '<br>'+
  '<div class="outterformbuttons">'+
     '<div class="formbuttons">'+
         '<button type="button" class="mui-btn mui-btn--raised" >Speichern</button>'+
         '<button type="button" class="mui-btn mui-btn--raised">Abbrechen</button>'+
      '</div>'+
  '</div>'+
'</form>';

 var buttons = modalEl.querySelectorAll('.formbuttons button');
 buttons[0].addEventListener('click', function() {
   sendUpdatedGroup(id, 
       document.getElementById('groupName').value,
       document.getElementById('groupDesc').value))
 });
 buttons[i].addEventListener('click', deactivateOverlay);