Question

我正在创建一个网页，我希望用新的元素替换元素。原始的元素是（例如）：

  <span class="green_link">;Abbreviation;The definition</span>

提供的字符串的形式为<separator><string><separator><string>。提供分隔符是为了确保第一个或第二个字符串中的任何特殊字符都不会导致解析困难。

onload元素的<body>事件处理程序调用JavaScript函数。它使用“green_link”类检测所有 s。如果不存在此类，则退出该函数。否则，对于每个，该函数会创建一个新的元素：

  <span class='revised_green_link'>
    <span class='abbreviation_alone'>
      Abbreviation
    </span>
    <span class='abbreviation_definition'>
      <a id='greenlink_1'></a>
      <a href='#greenlink_1' 
         style='text-decoration:none; 
                font-weight:bold;'>
        <span class='abbreviation'>
          Abbreviation
        </span>
        <span class='definition'>
          The definition
        </span>
      </a>
    </span>
  </span>

然后该函数将“green_link”替换为新创建的“modified_green_link”。

使用test page和actual page测试浏览器。 Firefox 3.6.12，Opera 11.11和Safari 5.0.2显示了两个页面的预期效果。 Chrome 12.0.742按预期显示测试页，但无法按预期显示实际页面。 IE 8无法按预期显示任一页面。

我发现有趣的是，一旦Visual Studio 2008使用“在浏览器中查看”（即{{}}显示页面，所有浏览器在localhost:port上定向网页时都会按预期显示网页。 3}}）。

两个HTML文档都被W3C标记验证服务成功检查为XHTML 1.0严格。 W3C CSS验证服务在CSS Level 2.1上成功验证了所有CSS（测试和实际）。除了jQuery JavaScript Library v1.4之外，所有JavaScript都通过JSLint传递而没有错误。

我不知道是什么导致了这种多样化的行为，并会欣赏一些想法。

Answer 1

您可以使用javascript创建HTML标记，它是跨浏览器的：

var newSpan = document.createElement('SPAN');
newSpan.id = 'newSpanId';

然后将其附加到所需的容器（div，a等等）

parentContainer.appendChild(newSpan);

删除元素：

parentContainer.removeChild(document.getElementById('elementId'));

Answer 2

在IE8中，失败有两个部分。

首先，HTTP标头包含以下行：

 x-ua-compatible: IE=EmulateIE7

将浏览器置于IE7模式。

第二部分是GreenLinkTest.js包含

getAttribute("class")

在IE7中不起作用。有关详细信息，请参阅getAttribute cannot return class in IE7?。

我看不出Chrome的问题。

Chrome和IE8与其他产品相比

2 个答案: