Replace html element with another element/text. Problem in the Source Code

Question

Im working on it from many many days (I'm not a developer). I want to replace HTML element with another element/text (p to h1 in the page-id-27), have tried 3 different solutions and are working in inspection mode and 'visually', but the source code doesn't change. I really need that the source code can change too. Is this idea possible? Is something wrong here? Many thanks

HTML:

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

3 Solutions:

$.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

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 );

Source code can't be changed with javascript. It is what is sent by server — charlietfl
– charlietfl, Commented Nov 29, 2020 at 13:26

54ka · Accepted Answer · 2020-11-29 13:15:32Z

2

Try to replace element

First get innerHtml from element p.

Then create a new element h1 place the content in the new element.

After this replace element p with 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>

edited Nov 29, 2020 at 13:15

answered Nov 29, 2020 at 13:09

54ka

3,5972 gold badges11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ro Li Over a year ago

Thank you but it doesn't work. Source code can't be changed with javascript. (see comment above).

54ka Over a year ago

Please copy the HTML code from your web page and attach it to your original post

Collectives™ on Stack Overflow

Replace html element with another element/text. Problem in the Source Code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related