CODEWITHSUNDEEP
javascriptjquery
Milena Sargsyan
Milena Sargsyan

Reputation: 11

How can I change the inner html of an appended element?

     <script>
$(document).ready(function(){
    
$(this).on("click", "#add", function(){
    
var html =  '  <div id="trav"><div class="adults"><p>Adults</p><div class="buttons"><button id="minusone" type="button">-</button> <p class="stspan"><span id="1stspan">1</span></p><button id="addone" type="button">+</button>        </div> </div><div class="children"><p>Children</p><p class="ages">(Ages 2-17)</p>                 <div class="buttons"><button id="minusone1">-</button> <p class="stspan"><span id="1stspan1">0</span></p><button id="addone1" >+</button>   </div></div>';
html += '<button id="add">Add another room + </button><button id="remove">Remove</button></div>'    
    
  $("#counter").append(html);
    let input1 = document.querySelector('#inp5'); 
  input1.value = parseInt(input1.value) + 1 + "rooms"   

    
});

This is an appended div I want to change <p class="stspan"><span id="1stspan">1</span></p> appended element's innerHTML on button click. So I tried this

 $('#counter').on('click', '#addone', function(){
    
    var valueCount
    
    valueCount = document.getElementById("1stspan").innerHTML;
    
    //input value increment by 1
    valueCount++;
    
    //setting increment input value

    document.getElementById("1stspan").innerHTML= valueCount 
    
   
});

This works, but it changes the innerHTML of the initial span, but I need to change innerHTML of the appended span

Upvotes: 1

Views: 695

Answers (3)

Viral Patel
Viral Patel

Reputation: 1156

I assume that you have the following HTML.

<p class="stspan"><span id="1stspan">1</span></p>

<button id="counter">Increment</button>

Here is the updated jQuery code for it.

$('#counter').on('click', function(){
  var valueCount;
  valueCount = document.getElementById("1stspan").innerHTML;

  //input value increment by 1
  valueCount++;

  //setting increment input value
  document.getElementById("1stspan").innerHTML= valueCount 
});

I've removed #addone from on.

Suggestion: If you're using jQuery, then what not use $("#1stspan") and .val()?

Upvotes: 1

user1076698
user1076698

Reputation: 691

Try the below one

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script>
function onCounterClick(){
valueCount = document.getElementById("1stspan").innerHTML;
valueCount++;
document.getElementById("1stspan").innerHTML=valueCount;
}
</script>
</head>
<body>
<p class="stspan"><span id="1stspan">1</span></p>
<button id="counter" onclick="onCounterClick()">counter</button>
</body>
</html>

Upvotes: 1

react_or_angluar
react_or_angluar

Reputation: 1574

Is this what you are trying to do?

$(function(){
    $("#addone").click(function(){
      $("#1stspan").text( Number($("#1stspan").text()) + 1 );
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0)" id="addone">Add One</a>
<p class="stspan"><span id="1stspan">1</span></p>

Upvotes: 2

Related Questions