CODEWITHSUNDEEP
jqueryinnerhtml
Igor Petev
Igor Petev

Reputation: 607

jQuery insert text after </span>

I have this html code:

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

I need to replace in each span text so i try this using jQuery:

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

But it does not replace ACCOUNT with kk i get this output:

Account number:kk ACCOUNT

And i need to get this:

Account number: kk

Upvotes: 0

Views: 919

Answers (3)

Prabin Sapal
Prabin Sapal

Reputation: 346

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>

Hey you can do the simple way as i did just add a new id and replace text using replacewith() jquery function

Upvotes: 1

Justin
Justin

Reputation: 52

Add your value using a separate span tag. So that we can easily identify that in jquery. Please refer below sample. To replace all the values you have to use for loop and apply same logic inside loop.

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

Upvotes: 1

Joe Coyle
Joe Coyle

Reputation: 621

With the following code, I extract only the spans, append "kk" to those, and append them to a string. Then I replaced the HTML in main_content with the new string.

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;

Upvotes: 1

Related Questions