创建元素和 insertBefore 不起作用答案

【问题标题】：Creating an element and insertBefore is not working创建元素和 insertBefore 不起作用
【发布时间】：2011-02-10 20:29:36
【问题描述】：

好的，我一直把头撞在墙上，我不知道为什么它没有创建元素。也许我在这里忽略了一些非常小的东西。基本上，这个 Javascript 代码在输出的 PHP 文档中，就像在页面加载的中间的某个地方，现在，不幸的是它不能进入标题。虽然我不确定这是否是问题所在，但也许是......嗯。

// Setting the variables needed to be set.
    echo '
        <script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/shoutbox.js"></script>';
    echo '
        <script type="text/javascript">
            var refreshRate = ', $params['refresh_rate'], ';
            createEventListener(window);
            window.addEventListener("load", loadShouts, false);

            function loadShouts()
            {
                var alldivs = document.getElementsByTagName(\'div\');
                var shoutCount = 0;
                var divName = "undefined";

                for (var i = 0; i<alldivs.length; i++)
                {
                    var is_counted = 0;
                    divName = alldivs[i].getAttribute(\'name\');

                    if (divName.indexOf(\'dp_Reserved_Shoutbox\') < 0 && divName.indexOf(\'dp_Reserved_Counted\') < 0)
                        continue;
                    else if(divName == "undefined") 
                        continue;
                    else
                    {
                        if (divName.indexOf(\'dp_Reserved_Counted\') == 0)
                        {
                            is_counted = 0;
                            shoutCount++;
                            continue;
                        }
                        else
                        {
                            shoutCount++;
                            is_counted = 1;
                        }
                    }

                    // Empty out the name attr.
                    alldivs[i].name = \'dp_Reserved_Counted\';

                    var shoutId = \'shoutbox_area\' + shoutCount;

                    // Build the div to be inserted.
                    var shoutHolder = document.createElement(\'div\');
                    shoutHolder.setAttribute(\'id\', [shoutId]);
                    shoutHolder.setAttribute(\'class\', \'dp_control_flow\');
                    shoutHolder.style.cssText = \'padding-right: 6px;\';
                    alldivs[i].parentNode.insertBefore(shoutHolder, alldivs[i]);

                    if (is_counted == 1)
                    {
                        startShouts(refreshRate, shoutId);
                        break;
                    }
                }
            }

        </script>';

另外，我确信我在这些函数中链接到的其他函数可以正常工作。这里的问题是，在这个函数中，div 永远不会被创建，我不明白为什么？此外，Firefox，FireBug 告诉我变量 divName 是未定义的，尽管我试图在函数中处理这个问题，但不知道为什么。

无论如何，我需要将创建的 div 元素插入到以下 HTML 之前：

echo '
            <div name="dp_Reserved_Shoutbox" style="padding-bottom: 9px;"></div>';

我在这里使用 name 而不是 id 因为我不想要重复的 id 值，这就是我更改 name 值并递增的原因，因为此函数可能被调用超过 1 次。例如，如果同一页面上有 3 个喊话框（不要问为什么...大声笑），我需要跳过我已经更改为“dp_Reserved_Counted”的其他名称，我相信我这样做是正确的。无论如何，如果可以的话，我会将其放入标题中并仅调用一次，但这不可能，因为它们已加载并且无法分辨它们是哪一个，因此它直接硬编码到实际中在 HTML 中的喊话框所在的页面上输出。基本上，不确定这是否是问题，但必须有某种解决方法，除非问题出在我上面的代码中...... arrg

请帮助我。我真正需要的是对这个问题进行第二次观察。谢谢:)

【问题讨论】：

好吧，这里有点迟钝。找出问题的一部分是HTML的回声直到脚本之后才被加载，所以在这种情况下它找不到它。但即使我先加载
，它仍然不起作用:(

标签： php javascript createelement

【解决方案1】：

当你测试divName 时，从这里切换你的条件顺序

                divName = alldivs[i].getAttribute(\'name\');

                if (divName.indexOf(\'dp_Reserved_Shoutbox\') < 0 && divName.indexOf(\'dp_Reserved_Counted\') < 0)
                    continue;
                else if(divName == "undefined") 
                    continue;

到这里：

                var divName = alldivs[i].getAttribute(\'name\');
                if (!divName) // this is sufficient, by the way
                    continue;
                else if (divName.indexOf(\'dp_Reserved_Shoutbox\') < 0 && divName.indexOf(\'dp_Reserved_Counted\') < 0)
                    continue;

问题是当脚本找到一个没有名字的 div 时，它会尝试调用一个不存在的值的 indexOf 属性，因此会抛出错误。

【讨论】：

根本不需要if/elseif/else，continue会跳出当前的for迭代...
感谢您将 divName 扼杀在萌芽状态！但是现在我开始在这一行 startShouts(refreshRate, shoutId);arrgggg 未定义 startShouts，将发布该功能，如果您想帮助我，它相当小......非常感谢！
该函数在它所链接的 .js 文件中，您认为这可能导致问题吗？？
哎呀，刚刚意识到，它在同一个位置添加了两次 div 元素...arggg。

【解决方案2】：

loadShouts 方法存在许多问题。首先是比较字符串“未定义”而不是直接布尔检查，这将匹配。我还删除了一堆不需要的逻辑。除此之外，分配给新的shoutHolder 的id 属性是作为数组传入的，而不是直接的属性分配。看看下面的效果是否更好。

function loadShouts()
{
  var alldivs = document.getElementsByTagName("div");
  var shoutCount = 0;
  var divName = "undefined";

  for (var i = 0; i<alldivs.length; i++)
  {
    divName = alldivs[i].getAttribute("name");

    if (!divName)
      continue;
    if (divName.indexOf("dp_Reserved_Shoutbox") < 0 && divName.indexOf("dp_Reserved_Counted") < 0)
      continue;

    shoutCount++;    
    if (divName.indexOf("dp_Reserved_Counted") == 0)
      continue;

    // Empty out the name attr.
    alldivs[i].setAttribute("name", "dp_Reserved_Counted");

    var shoutId = "shoutbox_area" + shoutCount;

    // Build the div to be inserted.
    var shoutHolder = document.createElement("div");
    shoutHolder.setAttribute("id", shoutId);
    shoutHolder.setAttribute("class", "dp_control_flow");
    shoutHolder.style.cssText = "padding-right: 6px;";
    alldivs[i].parentNode.insertBefore(shoutHolder, alldivs[i]);

    startShouts(refreshRate, shoutId);
    break;
  }
}

【讨论】：

好的，感谢您的尝试，但是对于您的脚本，它会永远不断地加载，必须在这里休息一下才能跳出循环。由于我们只需要第一次找到name="dp_Reserved_Shoutbox"，所以找到之后，需要在它前面插入一个div，并将name属性重命名为"dp_Reserved_Counted"（这样函数的时候就不会再算了）再次被调用），而不是它需要在这里突破，它没有这样做...... argg。不过我真的很感激，也许这可以解决......嗯。
好的，我在最后添加了一个中断，但是现在，就像之前它在同一个位置而不是在 2 个不同的位置这样做两次：<div id="shoutbox_area1" class="dp_control_flow" style="padding-right: 6px;">
而不是 area1，将第二次插入更改为 area2，它与 area1 arggg 保持相同。
只是让大家知道，如果你添加一个休息，这是完美的；在函数的末尾，但在 for 循环内，然后将 alldivs[i].name = "dp_Reserved_Counted"; 更改为 alldivs[i].setAttribute("name", "dp_Reserved_Counted");
好吧，至少在我的情况下它是完美的，干杯:)

【解决方案3】：

好的，只是想让您知道进展如何。我非常感谢 Tracker1 和 Casey Hope。特别是 Tracker 对功能的出色改写。你们都摇滚。这是我顺便使用的最后一个函数，只是对 Tracker1 的答案进行了一点点编辑，这就是为什么你得到了我的投票！

echo '
    <script type="text/javascript">
        var refreshRate = ' . $params['refresh_rate'] . ';
        createEventListener(window);
        window.addEventListener("load", loadShouts, false);

        function loadShouts()
        {
          var alldivs = document.getElementsByTagName("div");
          var shoutCount = 0;
          var divName = "undefined";

          for (var i = 0; i<alldivs.length; i++)
          {
            divName = alldivs[i].getAttribute("name");

            if (!divName)
              continue;
            if (divName.indexOf("dp_Reserved_Shoutbox") < 0 && divName.indexOf("dp_Reserved_Counted") < 0)
              continue;

            shoutCount++;    
            if (divName.indexOf("dp_Reserved_Counted") == 0)
              continue;

            // Empty out the name attr.
            alldivs[i].setAttribute("name", "dp_Reserved_Counted");

            var shoutId = "shoutbox_area" + shoutCount;

            // Build the div to be inserted.
            var shoutHolder = document.createElement("div");
            shoutHolder.setAttribute("id", shoutId);
            shoutHolder.setAttribute("class", "dp_control_flow");
            shoutHolder.style.cssText = "padding-right: 6px;";
            alldivs[i].parentNode.insertBefore(shoutHolder, alldivs[i]);

            startShouts(refreshRate, shoutId);
            break;
          }
        }

    </script>';

再次感谢，你是最棒的！

【讨论】：