CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SA__
SA__

Reputation: 1862

Replace the text that is inside the div

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.

Upvotes: 0

Views: 110

Answers (9)

arpan desai
arpan desai

Reputation: 909

$('#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'

Upvotes: 0

Tummala Krishna Kishore
Tummala Krishna Kishore

Reputation: 8271

You need to use the Replace with here is the fiddle

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

Upvotes: 1

Chandan Sarma
Chandan Sarma

Reputation: 308

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

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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.

Upvotes: 2

Shailesh Katarmal
Shailesh Katarmal

Reputation: 2785

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

check fiddle here

Upvotes: 0

Dariusz Majchrzak
Dariusz Majchrzak

Reputation: 1237

You can use wrapInner() jsfiddle: http://jsfiddle.net/darxide/y1wr44oL/

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

Upvotes: 0

Arunkumar Vasudevan
Arunkumar Vasudevan

Reputation: 5330

Try like

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

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can use callback function of html:

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

Upvotes: 1

opatut
opatut

Reputation: 6864

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

Upvotes: 0

Related Questions