如何使用javascript更改html元素的标题级别答案

【问题标题】：how to change the heading level of an html element using javascript如何使用javascript更改html元素的标题级别
【发布时间】：2020-10-22 04:13:46
【问题描述】：

如果我有类似的东西：

<h2> test text </h2>

我将如何使用 JavaScript 使文本现在位于段落标记中：

<p> test text </p>

我在想我可以这样做：

var text = ('h2').text();

('h2').replace('<p>' + text + '</p>');

但它并不完全奏效。

【问题讨论】：

你在使用 jQuery 吗？如果是这样，您需要在函数调用之前$...
Duplicate of How to replace DOM element in place using Javascript?.

标签： javascript html element html-heading

【解决方案1】：

在原版JS中，选择元素，创建<p>元素，并使用replaceWith将<h2>替换为新的<p>：

const h2 = document.querySelector('h2');
const p = document.createElement('p');
p.textContent = h2.textContent;
h2.replaceWith(p);

console.log(document.body.children[0].outerHTML);

&lt;h2&gt; test text &lt;/h2&gt;

【讨论】：

只是提醒其他人发现这一点 - 虽然它适用于这种特定情况，但对于更复杂的 HTML 它将失败。
上的任何属性都将丢失，使用 textContent 代替 innerHTML 意味着
中的任何元素都将被忽略，只会使用纯文本内容。

【解决方案2】：

您可以使用outerHTML 替换标签名称。

// document.getElementById("93").outerHTML = document.getElementById("93").outerHTML.replace(/wns/g,"lmn")

const h2List = document.getElementsByTagName('h2');
for (let index = 0; index < h2List.length; index ++) {
  h2List[index].outerHTML = h2List[index].outerHTML.replace(/h2/g, 'p');
}

&lt;h2&gt; test text &lt;/h2&gt;

【讨论】：

【解决方案3】：

只需像这样更改h2 标签的outerHTML：

const el = document.querySelector('h2');
el.outerHTML = '<p>' + el.innerHTML + '</p>';

&lt;h2&gt;Test 01&lt;/h2&gt;

【讨论】：

上的任何属性都将丢失，使用 textContent 代替 innerHTML 意味着

中的任何元素都将被忽略，只会使用纯文本内容。