火狐添加 <a xmlns="http://www.w3.org/1999/xhtml">答案

【问题标题】：Firefox add <a xmlns="http://www.w3.org/1999/xhtml">火狐添加 <a xmlns="http://www.w3.org/1999/xhtml">
【发布时间】：2015-11-17 07:05:35
【问题描述】：

编辑：由于 ajax 调用，这不会发生。为了好玩，我将其更改为使用 TinyMCE 组件中的值，我得到了同样的结果。

content = tinyMCE.get('cComponent').getContent(); //content at this point is <p>test</p>
valueToDisplay = content;

如果我这样做：

jQuery(selector).html(valueToDisplay);

我明白了：

<p><a xmlns="http://www.w3.org/1999/xhtml">test</a></p>

在使用 Firefox 3.6.10 和 jQuery 1.4.2 之前有人见过这个吗，我正在尝试使用 jQuery ajax 调用的结果来更改链接文本。

我从 ajax 调用中得到了预期的结果：

function getValueToDisplay(fieldType){
    var returnValue;
    jQuery.ajax({
        type: "GET",
        url: "index.cfm",
        async:false, 
        data: "fieldtype="+fieldType,
        success:function(response){
            returnValue = response;
    }                   
    });
    return returnValue;
   }

如果我此时检查值，我会得到预期值

console.log(returnValue) //output this --> <p>Passport Photo</p>

但是，当我使用 jQuery(selector).html 将其插入现有锚点时

我明白了：

<p><a xmlns="http://www.w3.org/1999/xhtml">Passport Photo</a></p>

我一直在试图找出 xmlns 锚点的添加位置，但无法将其缩小到任何特定的位置。

编辑：我尝试在 ajax 调用中强制 dataType:"html"...没有变化。

【问题讨论】：

index.cfm 的内容是什么样的？另外，为什么不将 .load() 函数与您的目标一起用作 index.cfm?fieldtype=foo
@dave index.cfm 与该查询字符串除了记录集上的循环输出之外什么都没有。没有或任何东西......这可能是为什么？
我将其更改为 getJSON 并且 html 函数仍然在周围添加 xmlns 锚。

标签： javascript jquery xml-namespaces

【解决方案1】：

你的选择器代表了一个a标签中的东西。

您的问题的一个更简单的版本是：

html:

<a id="test"></a>

js:

$('#test').html('<p>test</p>');

结果：

<a id="test"><p><a xmlns="http://www.w3.org/1999/xhtml">test</a></p></a>

进行更改，以免将 p 标记放在 a 标记中，或者执行以下操作：

$('#test').empty().append('<p>test</p>');

【讨论】：

+1 这可以解释为什么使用 jQuery(selector).html(function(index,oldHtml){ return valueToDisplay; });正在工作，因为它清除了它。感谢您提供更简单的解释。我想在锚中使用
并不是很好。我仍然发现 .html() 的文档有点误导（因为它不应该更改参数）。

【解决方案2】：

我想扩展答案，了解为什么会发生，并提供解决方法。做一个 GreaseMonkey 脚本我试图改变一个元素的内容，可能本身并没有改变，而是添加了更多元素，因为标签里面只有一个 IMG。

原文：

<a onclick=something><img src=url></a>

我试图做的是插入一个 DIV 元素，该元素将包装已经存在的 IMG 和另一个新的 SPAN 第二个孩子，所以目标是这样结束：

<a onclick=something><div><img src=url><span>text</span></div></a>

使用 innerHTML 属性会是这样的：

ANode.innerHTML = '<div>' + ANode.innerHTML + '<span>text</span></div>';

但我得到了：

<a onclick=something><div><a xmlns="http://www.w3.org/1999/xhtml"><img src=url><span>text</span></a></div></a>

虽然没有真正的解释，但查看这里的答案确实有所帮助。过了一会儿，我注意到问题中的示例没有发生一些事情，现在我认为这是解决这个问题的关键。我和 jfrobishow 一样在想它发生在哪里，我认为连接 ANode.innerHTML 有问题。

回答，在最初的问题中，将其缩小到发生这种情况的部分，请注意无处不在的<A> 包含了 IMG 和新的 SPAN 节点，所以这让我很好奇，在“构建”DIV 元素之前添加了不需要的<A>。因此，从这个、原始示例和我的以下解决方法中，您可以注意到当您在 Anchor 中插入新的 BLOCK 节点时会发生这种情况，因为 DIV 和 P（原始示例）元素都是 BLOCK 元素。

（如果你不知道我所说的 BLOCK 是来自元素的显示属性http://www.w3schools.com/cssref/pr_class_display.asp）

显而易见的解决方法是将要插入的节点类型替换为非块元素，在我的情况下，问题是我想要的 DIV，但当然这取决于脚本的目标，大部分这些东西是设计的，我放了一个 DIV 因为我需要它，所以我修复了它，将 DIV 变成另一个 SPAN（这是一个内联元素），但我仍然需要表现得像一个块元素，所以放上样式，这是什么对我有用：

ANode.innerHTML = '<span style="display:block;">' + ANode.innerHTML + '<span>text</span></span>';

所以，很明显，这个问题不是来自脚本（对我来说是 Javascript），而是来自样式（CSS）的东西。顺便说一句，这发生在 Firefox 3.6.18 上，请注意这不会发生在 Firefox 5.0 上。

【讨论】：

+1 很好的解决方法，使用内联元素并强制 display:block 如果这是你真正需要的。

【解决方案3】：

问题在于将块元素放置在锚标记内。这不是有效的 HTML，尽管大多数浏览器都能很好地解析它。

您只需在锚点内使用<span></span> 元素，而不是<div> 或<p>。

【讨论】：

【解决方案4】：

这是因为在您的<html> 中您声明了一个 XML 命名空间 (xmlns)。如果 xmlns 锚没有破坏任何东西，就把它留在那里。

另外，不要使用async:false，要在成功时调用回调函数。

【讨论】：

好点，但我没有在这个应用程序的 html 标记中使用任何命名空间。这是标题 - ttp://www.w3.org/TR/html4/loose.dtd" rel="nofollow" target="_blank">w3.org/TR/html4/loose.dtd">
Firefox 可能正在为您添加它，因为那里没有。 w3.org/1999/xhtml">
@dave 如果我正确阅读了规范，则仅当文档为 xhtml 时才需要 xmlns。这应该告诉浏览器不是吗？ ttp://www.w3.org/TR/html4/loose.dtd" rel="nofollow" target="_blank">w3.org/TR/html4/loose.dtd"> 基于w3schools.com/tags/tag_html.asp 和w3schools.com/tags/tag_doctype.asp

【解决方案5】：

编辑：实际上，这只是解决了该特定值的问题......它开始发生在以前很好的其他值上。

不知何故，这解决了这个问题。

改变了

jQuery(selector).html(valueToDisplay)

到

jQuery(selector).html(
    function(index, oldHtml)  
    {
        return valueToDisplay;
    }
);

根据文档，如果我没看错，它应该和我没有在函数中使用 oldHtml 一样。 (http://api.jquery.com/html/)。

来自文档：“jQuery 在调用函数之前清空元素；使用 oldhtml 参数来引用之前的内容。”

【讨论】：

【解决方案6】：

尝试将 ajax 调用中的 dataType 更改为 "text"

【讨论】：

它不是来自 ajax 请求。我能够使用直接从 TinyMCE 访问的值来重现它。它不是恒定的，但似乎来自 jQuery.html(string)

【解决方案7】：

使用 .append() 而不是 .html() 为我解决了这个问题。在今天之前从未见过这种情况。为什么要添加额外的 xmlns？我也尝试将我的数据类型更改为“文本”，但它没有用。它也确实弄乱了我的 CSS 样式，但是使用 .append() 完全解决了这个问题。谢谢！

更新：我需要将 div 的内容完全替换为 .ajax() 查询的结果。 .append() 本身是不够的，因为它只会添加到内容中，所以我找到了另一种解决方法：

先清除div：

$("#myDiv").html("");

然后，使用 .append() 追加内容：

$("#myDiv").append("My content");

它并不完美，但它确实有效。

【讨论】：

你和我一样吗？在锚点内使用
标签？