用另一个元素/文本替换 html 元素。源代码中的问题

Question

我已经做了很多天了（我不是开发人员）。 我想用另一个元素/文本（page-id-27 中的 p 到 h1）替换 HTML 元素，尝试了 3 种不同的解决方案，并且正在检查模式和“视觉”下工作，但源代码没有改变。 我真的需要源代码也可以改变。 这个想法可能吗？这里有什么问题吗？ 非常感谢

HTML：

<p class="title_banner"><strong>Sport</strong></p>

3 个解决方案：

$.noConflict();
jQuery(document).ready(function($){
var str = '<h1>Sport</h1>';
$('.title_banner').replaceWith(str);
    });

var e = document.getElementsByClassName('title_banner')[0];
var d = document.createElement('h1');
d.innerHTML = e.innerHTML;
e.parentNode.insertBefore(d, e);
e.parentNode.removeChild(e);

$.noConflict();
jQuery(document).ready(function($){
$(document).ready(function(){
$(".title_banner").html("<h1>Sport</h1>");
});
});

功能

function scriptnew(){
wp_register_script('dynamic-title', get_stylesheet_directory_uri() . '/js/dynamic-title.js', array( 'jquery' ), NULL, false );
if ( is_page('27') ) {
wp_enqueue_script( 'dynamic-title' );
}}
add_action( 'wp_enqueue_scripts', 'scriptnew', 10 );

Answer 1

尝试替换元素

首先从元素p获取innerHtml。

然后创建一个新元素h1将内容放入新元素中。

在此之后将元素 p 替换为 h1

var x = document.getElementsByClassName('title_banner')[0];
var y = x.innerHTML;

var newItem = document.createElement('h1');
newItem.innerHTML = y;

x.parentNode.replaceChild(newItem, x);

<p class="title_banner"><strong>Sport</strong></p>