javascript - 尝试将第一个 h2 标记转换为 h1 时出现 jQuery [object Object] 错误

Question

我正在处理一个所有标题都使用 h2 标签的网页。我想转换第一个标题，以便它使用 h1。

这是我正在使用的代码：

<script type="text/javascript">
var myHeader = $('h2:first');
var myHeaderHTML = myHeader.html();

alert("myHeader: " + myHeader);
alert("myHeaderHTML: " + myHeaderHTML);

$(document).ready(function() {
$(myHeader).replaceWith("<h1>" + $(myHeaderHTML) + "</h1>");
});
</script>

但是，当我重新加载页面时，我收到一个包含在 h1 标记中的 [object Object] 错误。正如您在上面看到的，我在代码中添加了几个警报，这样我就可以看到变量包含的值，它是包含 [object Object] 的 myHeader 变量。myHeaderHTML 变量包含我所期望的。

我怎样才能解决这个问题？

Answer 1

这是错误的：

"<h1>" + $(myHeaderHTML) + "</h1>"

您正在向对象添加字符串，该对象将对象转换为字符串"[Object object]"并执行连接。

它应该是：

 "<h1>" + myHeaderHTML + "</h1>"

Answer 2

您不需要再次调用 jquery。

$(myHeader).replaceWith("<h1>" + myHeaderHTML + "</h1>");

Answer 3

通过$(myHeaderHTML)将 HTML 字符串包装在一个 jQuery 对象中，该对象[object Object]在与其他字符串 ( "<h1>") 连接时将被序列化。

采用

$(document).ready(function() {

    var myHeader = $('h2:first');
    var myHeaderHTML = myHeader.html();

    alert("myHeader: " + myHeader); // alerts [object Object] as well
    alert("myHeaderHTML: " + myHeaderHTML);

    myHeader.replaceWith("<h1>" + myHeaderHTML + "</h1>");
});

Answer 4

这是一种可能更安全的方法，不需要将 HTML 内容放入字符串中：

<script type="text/javascript">
  $(function(){
    $('h2:first').wrapInner('<h1>').find('h1').unwrap();
  });
</script>