Bei der Verkettung doppelte Anführungszeichen beibehalten

Question

Ich arbeite an einer Webanwendung, um Kopie onclick Text aber die Art und Weise haben, wie Javascript meine Strings verkettet, die die Li-HTML-Elemente bilden, ersetzt es "" in meinem Elementselektor mit "" was meine Funktionalität bricht . Ich habe versucht, mit Streicherfluchten zu ersetzen, aber ohne Erfolg.

Mein auskommentiertes HTML ist ein Beispiel für eine funktionierende Funktion und was ich vorhabe.

var responseList = [ 
 
    'Text', 
 
    'also text', 
 
    'Some text!', 
 
    'Some more text..' 
 
]; 
 
var concatHTML = ''; 
 
var concatHTML2 = []; 
 
function print(message, i) { 
 
    concatHTML += '\r<li>' + '<p id=\"p' + i + '\" onclick=\'copyToClipboard(\"#p' + i +"\')\'>" + message + "</p>\r"; 
 
    console.log(concatHTML); 
 
    document.getElementById("respUL").innerHTML = concatHTML; 
 
} 
 

 
for (var i = 0; i < responseList.length; i++) { 
 
    print(responseList[i], i); 
 
} 
 

 
function copyToClipboard(element) { 
 
    var $temp = $("<input>"); 
 
    $("body").append($temp); 
 
    $temp.val($(element).text()).select(); 
 
    document.execCommand("copy"); 
 
    $temp.remove(); 
 
}

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<h1>Click & Paste</h1> 
 
    <h2>Making a list of things to click on then paste</h2> 
 

 
<ul id="respUL"> 
 
    
 
</ul> 
 
<!-- <p id="p1" onclick="copyToClipboard('#p1')">Text 
 
</p> 
 
<p id="p2" onclick="copyToClipboard('#p2')">Hi, I'm the 2nd TEXT</p><br/> --> 
 
</div>

Answer 1

Es sollte ziemlich einfach sein, wenn Sie innerHTML und erstellen die erforderlichen DOM-Knoten nicht mehr verwenden:

function print(message, i) { 
    var li = document.createElement('li'); 
    var p = document.createElement('p'); 
    p.id = i; 
    p.addEventListener('click', function(event) { 
     copyToClipboard("#p"+i); 
    }, false); 
    p.textContent = message; 
    li.appendChild(p); 
    document.getElementById("respUL").appendChild(li); 
}