javascript - 为什么我的自定义 jQuery html 标记添加了不存在的断点？

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 标记，即使在脚本执行之后也是如此。你的第二个例子没有。

address 默认是 block 标签。尝试设置 address { display: inline; 。

---

address 元素仍在文档中的原因是 html 设置了目标节点的 inner HTML。如果你想用你的自定义内容替换元素，你可以使用 replaceWith相反。