使用jquery在HTML中更改标记内的文本值

Question

我想用Jquery更改HTML代码中的文本。

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

我的代码看起来像这样

但是，我需要这种风格

Answer 1

当您在文字旁边使用$('#user_name').text("Heyy")时，您也会替换i和b元素。您可以做的是将文本包装到span并使用$('#user_name span').text("Heyy")替换它。 这是一个例子：

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

Answer 2

.text('xxx')将替换该元素中的所有内容，您也可以使用.html('<i class="fa fa-user"></i> Heyyyy<b class="caret"></b></a>')替换HTML。

选项1使用.text()：

1.使用范围<span>Profile</span>

包裹文字

2.然后用$('#user_name span').text('heyyyy');

定位

＆＃13;

＆＃13;

$('#user_name span').text('heyyyy');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

选项2（使用.html()）：

＆＃13;

＆＃13;

$('#user_name').html('<i class="fa fa-user"></i> Heyyy<b class="caret"></b></a>');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

将个人资料包裹在span内，并为其提供user_name

的ID

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