CODEWITHSUNDEEP
javascriptphphtmljquerywordpress
Ro Li
Ro Li

Reputation: 27

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

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

Upvotes: 1

Views: 219

Answers (1)

54ka
54ka

Reputation: 3589

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>

Upvotes: 2

Related Questions