Question

编辑：由于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（选择器）.html将其插入现有锚点

时

我明白了：

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

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

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

Answer 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>');

Answer 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上。

Answer 3

问题是将块元素放在锚标记内。这不是有效的HTML，即使大多数浏览器都会解析它。

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

Answer 4

这种情况正在发生，因为在<html>中您声明了XML命名空间（xmlns）。如果xmlns锚没有破坏任何东西，只需将它留在那里。

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

Answer 5

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

<击> 不知怎的，这解决了这个问题。

<击>

更改

jQuery(selector).html(valueToDisplay)

到

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

根据文档，如果我读得正确，它应该做同样的事情，因为我没有在函数中使用oldHtml。（http://api.jquery.com/html/）。

<击>
~~来自doc：“jQuery在调用函数之前清空元素;使用oldhtml参数引用以前的内容。”~~

Answer 6

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

Answer 7

使用.append（）而不是.html（）修复了我的问题。今天没见过这个。为什么要添加额外的xmlns？我尝试将我的dataType更改为“text”，但它不起作用。它确实搞乱了我的CSS样式，但使用.append（）完全解决了这个问题。谢谢！

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

首先清除div：

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

然后，使用.append（）：

附加内容

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

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

Firefox添加<a xmlns="http://www.w3.org/1999/xhtml"></a>

7 个答案: