jQuery append() 在 IE 中不起作用答案

【问题标题】：jQuery append() not working in IEjQuery append() 在 IE 中不起作用
【发布时间】：2011-06-30 20:34:20
【问题描述】：

我正在尝试使用以下方法将在字符串中构建的下表附加到我页面上的 div 中：

var table = 
'<table data-custom="3963770" id="table" cellpadding="3" cellspacing="5" 
        valign="top" width="995px" border="3" bordercolor="#83725B">

        <th height="50" colspan="2">Company Name</th>
        <th height="50" colspan="3">Esco Number</th>
        <th height="50" colspan="1">Province</th>
        <th height="50">Sector</th>
        <th height="50">Technology</th>
        <th height="50" colspan="2">Status</th>
      <tr>
        <td colspan="2">3H Envirostrategies cc</td>
        <td colspan="3">11059420</td>
        <td>Gauteng, KZN, Western Cape, Mpumalanga, Free State, 
            Eastern Cape</td>
        <td>
          <select id="mainSectors0">
            <option>Commercial</option>
          </select>
        </td>
        <td>
          <select id="mainTechs0">
            <option>Project Management</option>
          </select>
        </td>
        <td colspan="2">Active</td>
      </tr>
      <tr>
        <td style="border: none;" colspan="5">
          <div data-custom="contact_info" style="display:inline;"><u>Contact information</u></div>
        </td>
      </tr>
      <tbody data-custom="place_holder">
      </tbody>
    </table>';

我有一个 div 标签：

<div id="table"></div>

然后我尝试使用它来将表格添加到 div：

$(table).appendTo($('#table'));

// I've tried $("#table").append(table); but no luck.

它在除 IE 6+ 之外的所有其他浏览器中都能正常工作。有人知道解决方法吗，或者我做错了什么？

提前致谢。

【问题讨论】：

Javascript 对多行字符串非常敏感，我不会依赖它们在浏览器中被接受。尝试使用 var table = "
"
在 IE 中到底发生了什么？错误？
@Pointy 在任何 IE 浏览器中都没有发生任何事情......只是空白，@minikomi 我在上面格式化了它以提高可读性，它都在代码中的一行
你还想要原版吗？

标签： javascript jquery

【解决方案1】：

您的代码也适用于我，也适用于 IE：http://jsfiddle.net/doktormolle/N5z5T/

你确定在table = '<table>....</table';之前使用了var-keyword

如果不是，这可能会破坏 IE，请参阅此相关主题：jQuery selector does not work in IE7/8

【讨论】：

有没有办法向我们展示您的网站？其他 jQuery 脚本可以在您的网站上使用吗？
没办法，其他脚本都运行正常，只是在IE下不行
所以恐怕我们需要更多代码（可能是所有内容）或小提琴，错误不是由您发布的代码引起的。
不知道这里有可用的 PM。但如果他们是，是的，你可以。
@Dr.Molle 让我们continue this discussion in chat

【解决方案2】：

table 变量中的 HTML 无效。尝试制作$('#table').append('<div>a</div>');。它适用于 IE。使您的 HTAMl 有效。

【讨论】：

具体来说，<th>标签行缺少<tr>标签。
@MattBH，TH 是一个 CELL，而不是一行。尝试删除您的 TH 以进行测试。

【解决方案3】：

试试这个：

$('#table').html(table);

它使用jQuery's html function，在这种情况下它比附加更有意义。不知道为什么附加不起作用

【讨论】：

在内部，无论如何都会发生几乎完全相同的事情。
@Pointy：是的......我没有理由认为这会在 appendTo 上起作用，但话又说回来，我没有理由认为 appendTo 不起作用。我认为可能值得排除 appendTo 本身就是我们现在遇到的问题。
Append 会将元素添加到现有的父元素。这将替换父级中的整个 html，覆盖当前在其中的内容。不一样。你可以这样做 $('#table').html($('#table').html() + table);
@JSON - 我知道 append 追加和 html 替换，但是从 OP 的问题来看，这似乎是他真正想要做的。

【解决方案4】：

当您使用appentTo 时，您不需要将 div 作为 jquery 对象。尝试休闲

 $(table).appendTo('#table');

或

$('#table').append(table)

【讨论】：

【解决方案5】：

会不会是你有多个具有相同 id “table”的元素？

【讨论】：

没有尝试将 div 的 id 更改为 tabledata，但仍然没有成功。
@MattBH 附加后是否检查了源代码（使用开发人员工具）。也许它只是因为某种原因没有被渲染。
我已经检查了源代码并使用了警报alert($('#tabledata').html());，它返回空白
@MattBH 尝试附加其他内容。例如做$('#tabledata').append('<div>foo</div>'); alert($('#tabledata').html()); 并检查它是否有效。如果是这样，我不知道了。
使用 iframe？如果是这样，您不能使用纯 $ 在 iframe 中查找内容。还可以尝试记录$('#tabledata')、$(table) 等