Question

我的div设置为显示一行文字并成功完成。稍后在代码中我设置div的innerHTML以显示15行文本，它只显示第1行。

我认为像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首次出现在页面上时，div有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行都不可见。我在这里遗漏了一些基本的东西？

Answer 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将使用+而不是php

如果那不是问题，那么你需要显示来自innerHTML

的php的输出

Answer 2

你的document.getElementById（'adLinksArea'）。innerHTML = $ html需要在

中实现

<script></script>

标签，以便由浏览器执行。

Answer 3

如果您检查生成的页面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;

当innerHTML被更改时，div无法显示html

3 个答案: