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

时间:2014-03-19 00:36:29

标签: javascript

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

3 个答案:

答案 0 :(得分:2)

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

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

    thunder1Control.parentNode.removeChild(thunder1Control)
    

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

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

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

答案 1 :(得分:0)

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

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

    var li = document.createElement(&#34; li&#34;);

    soundFolders.appendChild(LI);

    等...

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

答案 2 :(得分:-2)

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

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