Escaping Quotes не работает в JavaScript innerHTML

Question

У меня есть довольно плохая «ситуация с цитированием» на данный момент. Я работаю внутри innerHTML и внутри этого я хочу, чтобы вызвать функцию на OnClick-Event, который оставляет меня следующее:

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

Я уже пытался избежать цитаты и использовать HTML-цитаты, но ни работал.

Answer 1

Вместо HTML-кодирования одиночных кавычек, просто JavaString избегает одиночных кавычек.

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

Если вы не хотите, чтобы попасть в отводящей ад, не использовать обработчики событий, как атрибуты HTML (которые мы перестали делать около 10 лет назад).

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

Answer 2

Вы забыли объявить desc и name взгляд на эту скрипку полностью работает 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);