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.

I wouldnt write that much HTML in javascript, and instead use some form of templating like Handlebars, or have that html as part of the page but not displayed, and then use that to load. But in the very least, I would assign classes to the buttons and then write a separate on click event handler for those classes to perform the required action. — Arathi Sreekumar, Jun 15 '16 at 14:55
I think you forgot to explain what your problem is (apart from having to write code inside JavaScript strings). — Álvaro González, Jun 15 '16 at 15:02

score 2 · Accepted Answer · edited Jun 15 '16 at 15:07

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);

To make your answer even better, I would suggest to the OP that they do not set the handlers from HTML attributes, they can just use event delegation and set event handlers on `modalEl ` — Ruan Mendes, Jun 15 '16 at 14:59
@JuanMendes feel free to edit my answer. I am a fan of combined answers :) — Jurik, Jun 15 '16 at 15:00
Further I would split event binding and html. So I would just use the html and bind the events after including the html. — Jurik, Jun 15 '16 at 15:01
@JuanMendes, since you did most of the work. Feel free to post this answer as yours and I will delete mine. — Jurik, Jun 15 '16 at 15:10

score 0 · Answer 2 · answered Jun 15 '16 at 15:09

You forgot to declare desc and name look at this fiddle totally works https://jsfiddle.net/L3Lfweh9/

HTML

<div id="message">

</div>

<button id="bttn">
click here
</button>

JS

var name = "one";
var desc = "two";
var text = '<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>';

  document.getElementById("bttn").addEventListener("click", function(){
    document.getElementById("message").innerHTML = text;
  }, false);

I didn't, i just did not include my whole code, as the context was not really necessary for my question — Fynn, Jun 15 '16 at 15:11
My question was: "How can i escape the quotes inside my innerHTML?". I thought that it was clear from the problem that i described. — Fynn, Jun 15 '16 at 17:21

Escaping Quotes does not work in JavaScript innerHTML

2 Answers2