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>

我需要替换每个span文本，所以我尝试使用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中轻松识别出来。请参考下面的示例。要替换必须用于循环的所有值，并在循环中应用相同的逻辑。

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

3 个答案: