Question

不知何故，当我尝试在jQuery中创建自定义HTML标记时，我得到了额外的中断点。任何人都可以解释我在这里错过了什么？

我有以下jQuery函数：

$('address').each(function() { 
 
     var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent($(this).text()) + "' target='_blank'>" + $(this).text() + "</a>"; 
 
     $(this).html(link); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h6 class="centered">Copyright © <script>document.write(new Date().getFullYear());</script> Company Name, LLC. All Rights Reserved <address>123 S Main St, Los Angeles, CA 90012</address><a href="tel:+11234567890">123-456-7890</a></h6>

产生以下页脚：

然而，通过简单地手动添加地址，像这样：

<h6 class="centered">Copyright © <script>document.write(new Date().getFullYear());</script> Company Name, LLC. All Rights Reserved <a href="http://maps.google.com/maps?q=123 S Main St, Los Angeles, CA 90012" target="_blank">123 S Main St, Los Angeles, CA 90012</a> | <a href="tel:+11234567890">123-456-7890</a></h6>

我得到预期的正确格式化页脚：

这是一个隐藏属性我不知道的jQuery的？我对jQuery相当陌生，但我认为这个想法是DOM元素的简单替换？

Answer 1

因为你不更换<address>标签在你的jQuery

利用这个

$(this).replaceWith(link); 代替$(this).html(link);

如果您使用的.html（），它只是在标签内增加。但在您的预期结果中，您没有<address>标记。所以你想要的是replaceWith

Answer 2

您的第一个示例在页脚中有address标记，即使在脚本执行后也是如此。你的第二个例子没有。

address默认情况下是块标记。尝试设置address { display: inline; }。

---

原因的address元件仍然在文档中，是html套内 HTML目标节点。如果您想用自定义内容替换元素，则可以使用replaceWith代替。