0

我的 div 设置为显示一行文本，它成功地做到了。稍后在代码中，我将 div 的 innerHTML 设置为显示 15 行文本，它只显示第一行。

我认为像 div 这样的块元素会根据它们的内容自动“增长”——请注意，我没有使用任何会影响 div“隐藏”溢出的 CSS。请注意，我在这个 div 周围放置了一个 3 像素宽的纯紫色边框，这样当我将它的“innerHTML”从 1 行文本更改为 15 行文本时，我可以直观地评估它的大小。

<div class="rbAdsLinksDiv" id="adLinksArea" style="border: 3px solid purple;">
  <br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
</div>

当网页第一次出现时，它正确地显示了 div 中的一行文本：

THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....

这是CSS：

 .rbAdsLinksDiv
 {
       margin-top: 5px;
 }

这是我的 PHP 代码，它生成 javascript 以用 15 行新文本填充 div：

 $html = <<<HEREDOC
  "<br /><br /><b>1) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>2) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>3) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>4) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>5) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>6) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>7) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>8) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>9) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>10) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>11) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>12) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>13) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>14) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
  "<br /><br /><b>15) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
 HEREDOC;

 $outStr = "document.getElementById('adLinksArea').innerHTML = $html";
 echo $outStr;

为了确保 'outStr' 是正确的，我在我的网页上的 iframe 中显示它的内容，是的，所有 15 行 html 代码都在那里。

我希望看到上面的所有 15 行，但我在 div 中看到的只是：

1) HEY WHERE ARE ALL THE AD LINKS?

并且所有其他 14 行都丢失了。

我认为，当您使用更多内容更新 div 的“innerHTML”时，该 div 应该自动扩展以显示所有内容 - 这是我的错误假设吗？如果是这样，我需要做什么才能使 div 的大小根据文本行数增长，而不总是 15 行？

我试图弄清楚这一点的其中一件事是，当 div 首次出现在页面上时，它不是只有 1 行文本，而是有 5 行文本：

<div class="rbAdsLinksDiv" id="adLinksArea" style="border: 3px solid purple;">
  <br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
  <br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
  <br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
  <br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
  <br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
</div>

上面的内容在网页上正确显示——事实上，当页面第一次加载时，我确实在网页上看到了上述所有 5 行文本。

 THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
 THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
 THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
 THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
 THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....

然后我更改 div 的“innerHTML”以显示上面的 15 行文本——div 缩小并且只显示一行新文本：

1) HEY WHERE ARE ALL THE AD LINKS?

所以所有其他 14 行都不可见。我在这里缺少一些基本的东西吗？

4

3 回答 3

1

也许您需要像这样在每行的末尾添加一个加号

  "<br /><br /><b>1) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />" +
  "<br /><br /><b>2) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />" + 
  "<br /><br /><b>1) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />" + 
  "<br /><br /><b>2) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"

这是我能想到的唯一原因，尤其是在添加 1 行时。

请注意，javascript 将使用+not php

如果这不是问题，那么您需要显示 php 的输出innerHTML

于 2013-07-25T16:37:42.547 回答
0

您的 document.getElementById('adLinksArea').innerHTML = $html 需要包含在

<script></script>

标记以便由浏览器执行。

于 2013-07-25T16:42:15.880 回答
0

如果您检查页面生成的 HTML 源代码，Javascript 代码将如下所示：

document.getElementById('adLinksArea').innerHTML = "<br /><br /><b>1) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>2) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>3) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
...

因此，div 'adLinksArena' 只分配了文本的第一行，而其他 14 行只是没有分配给任何内容的字符串。您可以更改要在 Javascript 中连接的字符串的 $html 变量：

$html = <<<HEREDOC
  "<br /><br /><b>1) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />" +
  "<br /><br /><b>2) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />" +
  ...
  "<br /><br /><b>15) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
HEREDOC;
于 2013-07-25T16:42:32.243 回答