jQuery 在 </span> 之后插入文本答案

【问题标题】：jQuery insert text after </span>jQuery 在 </span> 之后插入文本
【发布时间】：2018-10-28 02:57:12
【问题描述】：

我有这个 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

【问题讨论】：

你能在你想替换的文本周围加上一个跨度，让定位变得超级容易吗？
我将代码从旧的 stalker php 重写为 jquery，这是已在平台中定义的开源的 html 结构，因此我不会更改 html 结构，因为定义了 css 和 html，因此只需要 jquuery 即可在上面的例子中输出
<span> 不要以任何方式更改样式。这不应该是一个问题。如果没有围绕特定文本的包装元素，您将不得不替换文本节点，这是可行的，但比仅替换单个元素的 html 涉及更多

标签： jquery innerhtml

【解决方案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;

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 函数替换文本

【讨论】：