转义引号在 JavaScript innerHTML 中不起作用

Question

我现在的情况很糟糕 "quoting situation"。我在一个内部 HTML 内部工作，在这个内部我想在 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 看看这个 fiddle 完全有效 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);

转义引号在 JavaScript innerHTML 中不起作用

Escaping Quotes does not work in JavaScript innerHTML

javascript

html

quotes

double-quotes