javascript - 摆脱 Javascript 中的困境

Question

我有以下内容

var id='123';

newDiv.innerHTML = "<a href=\"#\" onclick=\" TestFunction('"+id+"', false);\"></a>";

呈现 <a href="#" onclick="return Testfunction('123',false);"></a>在我的 HTML 中。

我遇到的问题是，我希望调用方法 TestFunction，并在我的函数 StepTwo(string, boolean) 中用作字符串参数，理想情况下，它最终会出现在实时 HTML 中，如图所示...

<a href="#" onclick="StepTwo("TestFunction('123',false)",true)"></a>

注意这里的 TestFunction 是一个字符串(它是在 StepTwo 中使用 eval 执行的)。

我尝试将我的 JS 格式化为:

newDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo(\"TestFunction('"+id+"', false);\",true)\"></a>";

但是虽然这在我的 IDE 中看起来是正确的，但在渲染的 HTML 中，它是令人难以置信的乱码。

如果有人能指出我正确的方向，我将不胜感激。谢谢!

Answer 1

互联网上最大的资本失败之一是通过将字符串粘合在一起在 javascript 中创建 html。

var mya = document.createElement("a");
mya.href="#"; 
mya.onclick = function(){ 
    StepTwo(function(){ 
        TestFunction('123', false ); 
    }, true );   
};
newDiv.innerHTML = ""; 
newDiv.appendChild(mya);

这消除了对任何花哨的转义内容的需要。

(我可能应该以不同的方式执行“onclick”，但这应该有效，我正在努力不要只使用 jQuery 代码来完成所有事情)

下面是我在 jQuery 中的做法:

jQuery(function($){ 

  var container = $("#container"); 
  var link = document.createElement("a"); /* faster than  $("<a></a>"); */
  $(link).attr("href", "Something ( or # )" ); 
  $(link).click( function(){ 
       var doStepTwo = function()
       { 
            TestFunction('123', true ); 
       };
       StepTwo( doStepTwo, false );  /* StepTwo -> doStepTwo -> TestFunction() */
  });
  container.append(link); 
}); 

在 Javascript 中将字符串粘合在一起没有好的借口

它所做的只是ADD将 html 解析回 dom 结构的开销，以及ADD潜在的基于 XSS 的损坏 HTML。即使是心爱的谷歌在他们的一些广告脚本中也犯了这个错误，并且在我见过的许多情况下导致了史诗般的失败(他们不想知道这件事)

我不懂 Javascript 是唯一的借口，而且不是一个好借口。