Replace the text that is inside the div

Question

How can i remove the text

<h4>About Us</h4> with <a href='#aboutus'>About Us</a> that is inside the <div class="footer-block">

I tried to do

$( "div.second" ).replaceWith( "<h4><a href='#aboutus'>About Us</a></h4>" );

But it needs some class .. But i simply have <h4>About Us</h4> How can i do this..

<div class="footer-block">
<div id="custom-menu-wizard-2"><h4>About Us</h4><div class="menu-footer_about_menu-container">
<ul id="menu-footer_about_menu" class="menu-widget  " data-cmwv="3.1.3"><li id="menu-item-1054"><a href="http://projects.bizarresoftware.in/innomations/?page_id=38&amp;tab=1">Corporate Profile</a></li>
<li id="menu-item-1055" class="menu-item menu-item-type-custom menu-item-object-custom cmw-level-1 menu-item-1055"><a href="http://projects.bizarresoftware.in/innomations/?page_id=38&amp;tab=2">Vision</a></li>
<li id="menu-item-1056" class="menu-item menu-item-type-custom menu-item-object-custom cmw-level-1 menu-item-1056"><a href="http://projects.bizarresoftware.in/innomations/?page_id=38&amp;tab=3">Mission</a></li>
<li id="menu-item-1057" class="menu-item menu-item-type-custom menu-item-object-custom cmw-level-1 menu-item-1057"><a href="http://projects.bizarresoftware.in/innomations/?page_id=38&amp;tab=4">Core Team</a></li>
</ul>
</div>
</div>

Note :

I can't simply do replaceWith the as it will replace all the h4 in the page.. How can i traverse inside the footer-block and then do the replace.

Answer 1

The ReplaceWith function is not wrong, you have just to put the right selector '#custom-menu-wizard-2 h4' .

 $( '#custom-menu-wizard-2 h4' ).replaceWith( "<h4><a href='#aboutus'>About Us</a></h4>" ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="footer-block"> <div id="custom-menu-wizard-2"><h4>About Us</h4><div class="menu-footer_about_menu-container"> <ul id="menu-footer_about_menu" class="menu-widget " data-cmwv="3.1.3"><li id="menu-item-1054"><a href="http://projects.bizarresoftware.in/innomations/?page_id=38&amp;tab=1">Corporate Profile</a></li> <li id="menu-item-1055" class="menu-item menu-item-type-custom menu-item-object-custom cmw-level-1 menu-item-1055"><a href="http://projects.bizarresoftware.in/innomations/?page_id=38&amp;tab=2">Vision</a></li> <li id="menu-item-1056" class="menu-item menu-item-type-custom menu-item-object-custom cmw-level-1 menu-item-1056"><a href="http://projects.bizarresoftware.in/innomations/?page_id=38&amp;tab=3">Mission</a></li> <li id="menu-item-1057" class="menu-item menu-item-type-custom menu-item-object-custom cmw-level-1 menu-item-1057"><a href="http://projects.bizarresoftware.in/innomations/?page_id=38&amp;tab=4">Core Team</a></li> </ul> </div> </div> 

Hope this helps.

Answer 2

You can use callback function of html:

$('#custom-menu-wizard-2 h4').html(function(){
  return "<a href='#aboutus'/>" +  $(this).html() + "</a>");
});

Answer 3

您需要使用“ Replace with这是小提琴

$( '#custom-menu-wizard-2 h4' ).replaceWith( "<h4><a href='#aboutus'>About Us</a></h4>" );

Answer 4

$( ".footer-block h4" ).html( "<a href='#aboutus'>About Us</a>" );

Answer 5

尝试像

$( "#custom-menu-wizard-2 h4:first-child").replaceWith( "<h4><a href='#aboutus'>About Us</a></h4>" );

Answer 6

$('#custom-menu-wizard-2').find('h4').remove();
$('#custom-menu-wizard-2').html('<a href='#aboutus'>About Us</a>');

Considering there is no other element or text inside ' #custom-menu-wizard-2 '

Answer 7

您可以使用wrapInner（）jsfiddle： http : //jsfiddle.net/darxide/y1wr44oL/

$('.footer-block h4').wrapInner("<a href='#aboutus'></a>")

Answer 8

 $( ".footer-block h4" ).replaceWith( "<a href='#aboutus'>About Us</a>" );

在这里检查小提琴

Answer 9

 $("div#custom-menu-wizard-2 h4").replaceWith('<h4><a href=\'#aboutus\'>About Us</a></h4>');