使用 Javascript 的 innerHTML 问题答案

【问题标题】：Problems with innerHTML using Javascript使用 Javascript 的 innerHTML 问题
【发布时间】：2009-10-15 22:51:20
【问题描述】：

好的，所以基本问题在于设置 div 元素的 innerHTML，我的字符串中的任何 html 标记都在除 Firefox 之外的所有主要浏览器中被剥离（并且不显示）。现在要注意的是，第一次加载页面时不会发生这种情况，它只会在部分回发时发生（除非它的 Firefox，否则它总是有效的）。

我正在尝试运行一个脚本（实际上是通过 ScriptManager 从后面的代码创建和添加的）以将一些 html 元素（带有事件处理程序）添加到一些已经存在的 html 元素中。我知道脚本总是在运行，即使我有问题，因为我可以核对现有元素的 html 或设置一些文本。我什至可以拥有文本和标记，但不会在文本呈现时呈现标记，除非文本在标记内。所以：

someElement.innerHTML = "Blah blah blah" -- 有效

someElement.innerHTML = "<br/><br/>Blah blah blah<br/><br/>"

Blah blah blah 已显示，但没有中断

someElement.innerHTML = "<p>This will disappear</p><div>So will this</div>"

所有这些文本都将与标记一起消失。哦，我考虑过以“标准”方式执行此操作，即 document.createElement 等，但我遇到了完全相同的问题。

如果您需要/想知道其他任何信息，请询问。

编辑：当我说主要浏览器时，我的意思是：Safari 4.0.3、Chrome 3.0.195.27 和 IE 8.0.6

完整的javascript（与此功能相关）。如果有格式错误是因为这实际上是 C# 中的一个字符串，所以为了清楚起见，我试图删除一堆时髦的转义废话。

var overflowEls = getElementsByClass("descriptionBox");

for (var i = 0; i < overflowEls.length; i++)
{
    if (checkOverflow(overflowEls[i]))
    {
        var html = overflowEls[i].innerHTML;
        overflowEls[i].innerHTML = overflowEls[i].innerHTML = "<div class="videoFeedDescriptionButtons" onclick="expand(this);">+</div><br/><div onclick="collapse(this);" class="videoFeedDescriptionButtons">-</div>" + html;              

    }
}

周围的 html，记住它是从 youtube 提要中提取的，然后由 .net 转发器控件生成：

<td valign="top" style="margin: 5px 5px 5px 5px;height:auto;">
  <div class="descriptionBox" style="max-height:100px; overflow:hidden;" >
    <b>
    THE WORLDS BIGGEST PLANES!! by kieran smith</b><br />
    <br />
    by Antonov (ASTC). It was designed for the Soviet space program as a replacement for the Myasishchev M-4 'Bison' for the purpose of carrying the Energia     rocket boosters and to also be able to carry the Buran space shuttle in piggy-back mode much the same as the American Shuttle Carrier Aircraft.The An-225     first flew on 21 December, 1988. Only one An-225 is currently in service. It is commercially available for carrying ultra heavy and/or oversize freight. It     can carry up to 227 metric ...<br />
  </div>
  <a id="ctl00_ContentPlaceHolder1_Repeater1_ctl01_lnView" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Repeater1$ctl01    $lnView','')">View</a>&nbsp;&nbsp;<a id="ctl00_ContentPlaceHolder1_Repeater1_ctl01_lnAdd" 

  href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Repeater1$ctl01$lnAdd','')">Add</a>
 <br />

【问题讨论】：

您确定在插入后没有运行脚本来清除 div 或再次将其替换为空。如果您在插入后直接添加一个 alert(someElement.innerHTML) （或者更好的是 FF 上的 console.log），那么它会显示什么？
你能把“someElement”所在的周围的HTML贴出来吗？
如果我在插入后立即添加该警报，它仍然显示没有任何标记。我去看看console.log，以前没用过。
好吧，console.log 显示正确的输出，但那是因为它在 Firefox 中并且它在 Firefox 中有效。嗬！正是由于这个原因，我最不喜欢仅在 Firefox 之外出现的错误。不会碰巧有一个相当于 Chrome 的萤火虫，不是吗？

标签： .net javascript html innerhtml

【解决方案1】：

也许你的 CSS 中有 #someElement * { display: inline !important } 或类似的东西。

【讨论】：

我不认为它是这样的，我找不到任何适用于我正在使用的 div 的规则。另外，div 根本没有出现，甚至在页面源中也没有。我不认为 display: inline;可能会导致这种情况。

【解决方案2】：

原来不知何故，脚本管理器多次将脚本添加到页面。有点。我之所以这么说，是因为它输出的脚本中还有一些 C# 格式的东西。这是它的样子：

<script type="text/javascript">

"var overflowEls = getElementsByClass("descriptionBox"); for (var i = 0; i < overflowEls.length; i++) { if (checkOverflow(overflowEls[i])) { var html = overflowEls[i].innerHTML; overflowEls[i].innerHTML = overflowEls[i].innerHTML = "

<div class="\"onclick="\">+</div>

<div onclick="\"collapse(this);\""class="\"videoFeedDescriptionButtons\"">-</div>
"" + html;}}"

</script>

如您所见，一团糟。无论如何，我通过将脚本作为函数移动到 aspx 页面并让脚本管理器输出对函数的调用来“解决”这个问题，所以现在我在 html 头中得到了越来越多的函数调用脚本。该脚本现在可以正常工作，因此我将其标记为已回答并打开一个新问题以尝试找出脚本管理器添加重复项的原因。

【讨论】：