CODEWITHSUNDEEP
javascriptjqueryhtml
Nizomjon Hajiev
Nizomjon Hajiev

Reputation: 65

Changing text value inside of a tag in HTML with jquery

I would like to change text inside of HTML code with Jquery.

<li class="dropdown">
        <a **id="user_name"**  href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-user"></i>
            Profile
            <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <a href="{{ url_for('site.admin_profile') }}"><i class="fa fa-fw fa-user"></i> Profile</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="{{ url_for('site.logout') }}"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
            </li>
        </ul>
    </li>
  $('#user_name').text("Heyy")

my code it looks like this

If I do my code it looks like this

However, I need this style

Important style

Upvotes: 1

Views: 1478

Answers (3)

Dalin Huang
Dalin Huang

Reputation: 11342

.text('xxx') will replace everything inside that element, you could also use .html('<i class="fa fa-user"></i> Heyyyy<b class="caret"></b></a>') to replace the HTML.

Option 1 use .text():

1.wrap your text with a span <span>Profile</span>

2.then target it with $('#user_name span').text('heyyyy');

$('#user_name span').text('heyyyy');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<li class="dropdown">
  <a id="user_name" href="#" class="dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-user"></i> <span>Profile</span>
    <b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li>
      <a href="{{ url_for('site.admin_profile') }}"><i class="fa fa-fw fa-user"></i> Profile</a>
    </li>
    <li>
      <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
    </li>
    <li class="divider"></li>
    <li>
      <a href="{{ url_for('site.logout') }}"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
    </li>
  </ul>
</li>

Option 2 (use .html()):

$('#user_name').html('<i class="fa fa-user"></i> Heyyy<b class="caret"></b></a>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<li class="dropdown">
  <a id="user_name" href="#" class="dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-user"></i> Profile
    <b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li>
      <a href="{{ url_for('site.admin_profile') }}"><i class="fa fa-fw fa-user"></i> Profile</a>
    </li>
    <li>
      <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
    </li>
    <li class="divider"></li>
    <li>
      <a href="{{ url_for('site.logout') }}"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
    </li>
  </ul>
</li>

Upvotes: 1

Junius L
Junius L

Reputation: 16132

Wrap the profile inside a span and give it an id of user_name

<span id="user_name">Profile</span>


 $('#user_name').text("Heyy")
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-user"></i>
        <span id="user_name">Profile</span>
        <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li>
            <a href="{{ url_for('site.admin_profile') }}"><i class="fa fa-fw fa-user"></i> Profile</a>
        </li>
        <li>
            <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="{{ url_for('site.logout') }}"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
        </li>
    </ul>
</li>

Upvotes: 0

Titus
Titus

Reputation: 22474

When you use $('#user_name').text("Heyy") beside the text you're also replacing the i and b elements. What you could do is to wrap the text into a span and use $('#user_name span').text("Heyy") to replace it. Here is an example:

$("#user_name span.txt").text("Heyy");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel='stylesheet' type='text/css'> 


 <a id="user_name"  href="#" class="dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-user"></i>
    <span class="txt">Profile</span>
    <b class="caret"></b>
</a>

Upvotes: 1

Related Questions