Question

将html转换为javascript变量时遇到问题。

我的HTML代码

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

我想动态创建这个html代码，但我在引用中有问题（＆＃34;和＆＃39;）

我尝试过如下

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： 不要改变引号的顺序。只将onclick事件声明引号从signle更改为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/

P.S。我改变了一些声明和调用函数的方法，因为它给出了一个错误。

Answer 4

您可以使用template literal

＆＃13;

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;

＆＃13;

<div id="test">

</div>

＆＃13;

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

Answer 5

您也可以使用 document.createElement 来生成 div ，而不是构建字符串。然后将其附加到父#test

＆＃13;

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

＆＃13;

<div id="test">

</div>

＆＃13;

Answer 6

由于上面已经回答了您的需求，我只是补充一点，您尝试访问和操作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);

如何在JavaScript中将html转换为变量？

6 个答案: