Question

我想知道是否有更好的方式来做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)无效吗？

Answer 1

关于另一种处理此类代码的方法的第一个问题，“最佳”是一个意见问题，所以我不会真正尝试解决最好的问题。但是，我会给你一些选择：

避免将代码放入HTML中的字符串中。这有各种各样的限制，你通常希望将代码与表示分开。
使用obj.addEventListener()在代码中安装事件处理程序，而不是在HTML中放置事件处理程序和代码。
使用层次结构中特定点的类和ID或DOM查询来检索页面中的特定对象，而不是尝试在全局变量中保存对它们的引用。在简单的javascript中，element.querySelectorAll()非常强大。
在许多情况下，使用obj.style.display = "none"和obj.style.display = "block"隐藏和显示HTML块要比动态创建和销毁HTML要简单得多，这样就有了HTML的全部优势在页面中指定，不必将其作为javascript字符串。
对于因任何原因无法正常使用隐藏/显示的大型动态HTML块，您可以使用ajax从服务器动态加载HTML的片段/模板，或者使用javascript动态创建HTML。我的第一个偏好通常是隐藏/显示然后如果由于某种原因这是不实际的，它取决于我想要插入的HTML多少根据我是否宁愿加载模板或使用动态创建它的状态而变化JavaScript的。如果你有大块的HTML，你必须适应你的javascript，它引用混乱......等等 - 除了使用一个引用方案为JS字符串分隔符而另一个在你的HTML。
在您的特定情况下，看起来隐藏/显示方法看起来很简单。

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

thunder1Control.parentNode.removeChild(thunder1Control)

不起作用，因为thunder1Control变量很长，在执行点击处理程序时超出范围，因为它是buttonClicked()点击函数中的局部变量。

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

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

Answer 2

我可以看到其他两种方式：

使用有助于此类事情的框架。其他人有提到了jQuery。一位评论者认为这可能有点矫枉过正为此包含一个框架。我会争辩说，如果你是在做任何 javascript时，你应该使用一个框架来让它不那么可怕。但如果你继续建议2 不同意！
您可以通过普通的旧javascript创建每个元素，并将其附加到您需要的元素，而不是直接插入innerHTML。离。

var li = document.createElement（＆＃34; li＆＃34;）;

soundFolders.appendChild（LI）;

等...

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

Answer 3

我认为更好的选择是使用jQuery，然后使用.html()（相当于jQuery中的innerHTML），您可以使用html创建模板并使用.load()代替。效果更好，更清洁。而且你不必担心你说的三重嵌套引用。

编辑：我不知道为什么我在这里得到如此多的贬低...海报不想担心三重嵌套报价。一个简单而且优雅的解决方案是使用.load()并创建一个模板，而不是一个非常长的html字符串......

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

3 个答案: