jQuery 在 </span> 之后插入文字

Question

我有这个 html 代码：

<!-- informations -->
        <div class="simple_layer">
            <div class="main_container">
                <!-- user information -->
                <div class="main_content">
                    <span class="label">Account number:</span> ACCOUNT<br>
                    <span class="label">Tariff plan:</span> PLAN<br>
                    <span class="label">End date:</span> 05.23.2019 (371 days)<br>
                </div>
            </div>

        </div>

我需要在每个跨度文本中进行替换，所以我尝试使用 jQuery:

$(".simple_layer .main_content").find("span")[0].innerHTML += ' kk<br>';

但它不会用 kk 替换 ACCOUNT 我得到这个输出：

Account number:kk ACCOUNT

我需要得到这个：

Account number: kk

Answer 1

使用以下代码，我仅提取跨度，将 "kk" 附加到那些，并将它们附加到字符串。然后我用新字符串替换了 main_content 中的 HTML。

var spanCollection = $(".simple_layer .main_content").getElementsByTagName("span");
var newMainContentHTML = "";

for (var i = 0; i < spanCollection.length; i++) {
    newMainContentHTML += spanCollection[i].innerHTML + " kk<br/>";
}

$(".main_content").innerHTML = newMainContentHTML;

Answer 2

使用单独的 span 标记添加您的值。这样我们就可以很容易地在 jquery 中识别出来。请参考以下示例。要替换所有值，您必须使用 for 循环并在循环内应用相同的逻辑。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){

        $(".simple_layer .main_content").find(".value")[0].innerHTML = ' kk';
    });
});
</script>
</head>
<body>

<div class="simple_layer">
            <div class="main_container">
                <!-- user information -->
                <div class="main_content">
                    <span class="label">Account number:</span> <span class="value">ACCOUNT</span><br>
                    <span class="label">Tariff plan:</span> PLAN<br>
                    <span class="label">End date:</span> 05.23.2019 (371 days)<br>
                </div>
            </div>

 </div>

 <p> Click Me </p>
 <div class="output"> </div>

</body>
</html>

Answer 3

jQuery("#account").replaceWith('kk')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simple_layer">
            <div class="main_container">
                <!-- user information -->
                <div class="main_content">
                  <span class="label">Account number:</span> <span id="account">ACCOUNT</span><br>
                    <span class="label">Tariff plan:</span> PLAN<br>
                    <span class="label">End date:</span> 05.23.2019 (371 days)<br>
                </div>
            </div>

        </div>

嘿，你可以像我一样使用简单的方法，只需添加一个新 ID 并使用 replacewith() jquery 函数替换文本

jQuery 在 </span> 之后插入文字

jQuery insert text after </span>

jquery

innerhtml