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

我正在处理一个所有标题都使用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]错误。正如您在上面所看到的，我在代码中添加了几个警报，以便查看变量包含的值，而myHeader变量包含[object]。myHeaderHTML变量包含我所期望的内容

---

如何修复此问题？

您不需要再次调用jquery

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

这是错误的：

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

通过$myHeaderHTML，您将HTML字符串包装在一个jQuery对象中，当与其他字符串连接时，该对象将被序列化为[object object]

使用

---

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

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

$(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>");
});

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