有没有更好的方法来做innerHTML？

-1

我想知道是否有更好的方法来做innerHTML比我在这里做的。我这样做的方式导致问题，因为我不能有三重嵌套引号。另一方面，真的很难看和管理。谢谢！有没有更好的方法来做innerHTML？

function buttonClicked(buttonValue) 
{ 
    switch (buttonValue) 
    { 
     case 1: 
      soundFolders.innerHTML = "<li onClick='buttonClicked(11);'>Thunder 1</li> <li onClick='buttonClicked(13);'>Light Rain 1</li> <li onClick='buttonClicked(0);'>Back</li>"; 
      break; 

     case 11: 
      if(!thunder1Control) 
      { 
       thunder1.play(); 
       var thunder1Control = document.createElement("li"); 
       soundList.appendChild(thunder1Control); 
       thunder1Control.innerHTML = "<h3>Thunder 1</h3> <button class='stopSound' onClick='thunder1.pause(); thunder1.currentTime=0; thunder1Control.parentNode.removeChild(thunder1Control); '>X</button> <button class='volDown' onClick='thunder1.volume -= 0.25;'>-</button> <button class='volUp' onClick='thunder1.volume += 0.25;'>+</button>"; 
       thunder1Control.setAttribute("class", "playingSound"); 
      }

P.S.你们知道为什么thunder1Control.parentNode.removeChild(thunder1Control)不工作？

来源

2014-03-19 MrSnappingTurtle

如果'thunderControl'有'.parentNode'，''.removeChild（）'应该可以工作。是否有理由替换元素的所有内容？你不能只更新特定的节点吗？ –

寻找不显眼的javaScript，它可能会帮助您的整体设计。 – Rayshawn

将所有这些onclick处理程序移出HTML定义。 –

-2

我认为更好的选择是使用jQuery，而不是使用.html()（相当于jQuery中的innerHTML），您可以使用html创建模板并使用来代替。工作更好，它更干净。正如你所说，你不必担心三重嵌套报价。

编辑：我不知道为什么我在这里得到这么多低调......海报不想担心三重嵌套报价。一个简单的，对我来说，优雅的解决方案是使用并创建一个模板，而不是HTML的一个很长的字符串...

来源

2014-03-19 00:38:25 antimatter

建议使用您最喜爱的图书馆不是答案。无论哪种方式，如何使用'.html（）'而不是'.innerHTML'对嵌套引号做任何事情？使用'.load（）'用于发出服务器请求。在这里看不出有什么相关的。 –

如果你真的阅读我的文章，我并不是建议使用'.html（）'。我建议使用'.load（）'，因为他/她不需要使用嵌套引号，因为他/她可以加载html模板而不是像他的例子那样编写一个长字符串。感谢downvoting一个非常好的答案。 – antimatter

你是对的。我错过了“的”一词。不过这不是一个很好的答案。没有迹象表明使用了jQuery，'.load（）'在这里没有意义。 -1 –

基本上有两种其他的方式，我可以看到：

使用一个框架，帮助这种事情。其他人有提到jQuery。一位评论者认为，为了包含这个框架，可能会过度杀伤。我会争辩说，如果你是做任何 JavaScript的所有，你应该使用框架使它不那么可怕。但是如果你对不同意，继续进行建议2！
您可以通过普通的旧javascript创建每个元素，并将其附加到您需要的元素，而不是直接将其插入到innerHTML中。恩。

var li = document.createElement（“li”）;

soundFolders.appendChild（li）;

等等

但是，说实话，使用jQuery的一些别人的建议。它非常小，它会大量清理所有的JavaScript。通过Google加入它，它可能已经被缓存在用户浏览器中。
https://developers.google.com/speed/libraries/devguide#jquery

来源

2014-03-19 01:26:49 Sean

您关于另一种方式来处理这个类型的代码的第一个问题，“最好”，是见仁见智的，所以我不会真的试图解决什么是最好的。但是，我会给你一些替代方案：

避免将代码放入HTML中的字符串。对此有各种各样的限制，你通常希望将代码从演示文稿中分离出来。
在代码中使用obj.addEventListener()安装事件处理程序，而不是将事件处理程序和代码放入HTML中。
使用来自层次结构中特定点的类和ID或DOM查询来检索页面中的特定对象，而不是尝试在全局变量中保存对它们的引用。在普通的JavaScript中，element.querySelectorAll()非常强大。
在很多情况下，使用obj.style.display = "none"和obj.style.display = "block"来隐藏和显示HTML块比动态地创建和销毁HTML要简单得多，而且HTML的附加优势在页面中全部指定，并且不会必须成为一个JavaScript字符串。
对于大型的动态HTML模块，无论出于何种原因，这些模块都无法很好地与hide/show配合使用，您可以使用ajax从您的服务器动态加载HTML片段/模板，或者使用javascript动态创建HTML。我的第一个首选项通常是隐藏/显示，然后如果由于某种原因而不实用，那么它取决于我想要插入的HTML的多少取决于我是宁愿加载模板还是使用动态创建它的状态JavaScript的。如果你有大块的HTML，你必须适合你的javascript，这是杂乱的引用，等等...... - 没有办法绕过，如果你走的路线，而不是使用一个引号计划的JS字符串分隔符和其他你的HTML。
在你的特定情况下，它看起来像hide/show方法很简单。

你的第二个问题，这行代码：

thunder1Control.parentNode.removeChild(thunder1Control)

不起作用，因为当执行你的点击处理程序，因为它是在一个局部变量的thunder1Control变长，长出来的范围你点击功能buttonClicked()。

当您将代码作为HTML的一部分放入字符串中时，它仅在全局范围内进行评估，因此任何它尝试引用的变量都必须是全局范围的。

我建议你不要把代码放到你的HTML中的字符串中。使用对实际JavaScript函数的引用。在这种特殊情况下，我不得不看到你的HTML知道如何为你提供最好的建议。如果只有一个thunder1Control，那么我建议你只需在其上放一个id值，并在需要时用document.getElementBtId()检索它，而不是试图在变量中保存对它的引用。

来源

2014-03-19 01:43:25 jfriend00

有没有更好的方法来做innerHTML？

回答

相关问题