如何將html轉換爲javascript中的變量？

Question

我將html轉換爲javascript變量時出現問題。

我的HTML代碼

<div onclick="openfullanswer('2','Discription part','This is the code part');"> 

我要動態地創建這個網站的代碼，但我有報價的問題（」和「）

我試着像下面

for(i=0;i<result.length;i++) 
{  
     strVar +="<div onclick='openfullanswer("+result[i].ReplyID+",'"+result[i].Description+"','"+result[i].Code+"');'>Test code</div>"; 
} 

https://jsfiddle.net/8782n60z/1/

Answer 1

方法1： 您應該改變單一和雙引號的序列，並必須在逃避單引號用「\」上單擊函數參數

請檢查下面的代碼片段以獲取更多的理解。

var result=[]; 
 
var obj=new Object(); 
 
obj.ReplyID=1; 
 
obj.Description="This is my description"; 
 
obj.Code="This is my Code Part"; 
 

 
result.push(obj); 
 

 

 

 
strVar=""; 
 
for(i=0;i<result.length;i++) 
 
{  
 
    strVar +='<div onclick="openfullanswer(\''+result[i].ReplyID+'\',\''+result[i].Description+'\',\''+result[i].Code+'\');">Test code</div>'; 
 
} 
 

 
document.getElementById("test").innerHTML=strVar; 
 

 

 
function openfullanswer(replyid,desc,code) 
 
{ 
 
    alert("success"); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 

 
</div>

方式2： 不要更改報價的順序。 只需將signlele中的onclick事件聲明引號更改爲double並使用'\'轉義雙引號即可，而無需更改任何內容。

請檢查以下代碼片段以獲得更多理解。

var result=[]; 
 
var obj=new Object(); 
 
obj.ReplyID=1; 
 
obj.Description="This is my description"; 
 
obj.Code="This is my Code Part"; 
 

 
result.push(obj); 
 

 

 
strVar=""; 
 
for(i=0;i<result.length;i++) 
 
{  
 
    strVar +="<div onclick=\"openfullanswer("+result[i].ReplyID+",'"+result[i].Description+"','"+result[i].Code+"');\">Test code</div>"; 
 
} 
 

 
document.getElementById("test").innerHTML=strVar; 
 

 

 
function openfullanswer(replyid,desc,code) 
 
{ 
 
alert("success"); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 

 
</div>

Answer 2

strVar +="<div onclick=\"openfullanswer('"+result[i].ReplyID+"','"+result[i].Description+"','"+result[i].Code+"');\">Test code</div>"; 

嘗試。

Answer 3

你寫的代碼產生如下：

<div onclick='openfullanswer(1,'This is my description','This is my Code Part');'>Test code</div> 

以上是無效的，因爲也有onclick值內單引號。

您將需要轉義這些字符。

strVar +="<div onclick=\"window.openfullanswer("+result[i].ReplyID+",'"+result[i].Description+"','"+result[i].Code+"');\">Test code</div>"; 

See here在SO在詳細說明這個問題的製品。

看到這裏工作演示：https://jsfiddle.net/8782n60z/3/

附：我改變了一點聲明和調用函數的方式，因爲它給出了一個錯誤。

Answer 4

與其建造的字符串，你也可以使用使用document.createElement生成您DIV。然後將其附加到父#TEST

var result=[]; 
 
var obj=new Object(); 
 
obj.ReplyID=1; 
 
obj.Description="This is my description"; 
 
obj.Code="This is my Code Part"; 
 

 
result.push(obj); 
 

 
var div; 
 
for(i=0;i<result.length;i++) 
 
{  
 
    div = document.createElement('div'); 
 
    div.innerHTML = 'Test code' 
 
    div.onclick = openfullanswer; 
 
} 
 
document.getElementById("test").appendChild(div); 
 

 
function openfullanswer(replyid,desc,code) 
 
{ 
 
    alert("success"); 
 
}

<div id="test"> 
 

 
</div>

Answer 5

由於需要上面已經回答了什麼，我只補充一點，這樣你試圖訪問和操作DOM元素不安全或推薦處理dom元素的方式。而不是直接寫入DOM，它最好使用addEventListner()函數並將它綁定到它。

例如，而不是寫作，

strVar +="<div onclick='openfullanswer("+result[i].ReplyID+",'"+result[i].Description+"','"+result[i].Code+"');'>Test code</div>"; 

你應該不是做

strVar.outerHTML += '<input id="btncall" ...>' 

document.getElementById ("btncall").addEventListener ("click", openfullanswer(parameters), false); 

Answer 6

您可以使用template literal

var result = []; 
 
var obj = new Object(); 
 
obj.ReplyID = 1; 
 
obj.Description = "This is my description"; 
 
obj.Code = "This is my Code Part"; 
 

 
result.push(obj); 
 

 
strVar = ""; 
 
for (i = 0; i < result.length; i++) { 
 
    strVar += `<div 
 
       onclick="openfullanswer('${result[i].ReplyID}' 
 
             , '${result[i].Description}' 
 
             , '${result[i].Code}');"> 
 
       Test code 
 
      </div>`; 
 
} 
 

 
function openfullanswer(replyid, desc, code) { 
 
    alert("success"); 
 
    console.log(replyid, desc, code); 
 
} 
 

 
document.getElementById("test").innerHTML = strVar;

<div id="test"> 
 

 
</div>

jsfiddle https://jsfiddle.net/8782n60z/5/