javascript - html() 似乎不适用于 li 中的 span 元素

Question

我有一个带下拉菜单的引导导航标题。我试图用 html() 在其中一个下拉列表中附加一个词，但没有成功。我试过 append() 但它也不起作用。我不明白，因为列表是静态的而不是动态的。

下拉菜单

<li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="fa fa-bell fa-lg header-icon" aria-hidden="true"></i>
         .'<span class="header-li">'.$Notifications.'</span>
         <i class="fas fa-caret-down header-icon"></i>
        <ul class="dropdown-menu">
         <li><a class="" href="#">'.$Youhavenewnotifications.'</a></li>
         <hr>
          <li><a id="alist2345" href="#">
           Hi visitor from <span id="userRegion"></span>!
           We have many customers like you from <span id="userCity"></span>!
        </a></li>
        </ul>
      </li>

jQuery

$( window ).load(function() {
//get user location details
$.get("http://ipinfo.io", function (response) {

 var userCity = response.city;
 var userRegion = response.region;

 //append to header
  $('#userRegion').html(userRegion);//does not work
  $('#userCity').html(userCity);//does not work
   //$('#alist2345').html(userRegion + userCity);//EDIT: THIS IS JUST AN EXAMPLE to show that this one works but it is obviously not the desire outcome

}, "jsonp");
});

Answer 1

它确实按预期将 html 注入(inject)到 span 中，但最后插入的 html 覆盖了之前的更改。

$('#userRegion').html(userRegion);
$('#userCity').html(userCity);
$('#alist2345').html(userRegion + userCity); -- > This overwrites the `html` again ( and the span tags get replaced )

删除最后一条语句，它应该按预期显示。

否则你也可以试试这个..

$('#alist2345').html($('#alist2345').html() + userRegion + userCity);