如何更改附加元素的内部 html？
[英]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.
这是一个附加的 div，我想在单击按钮时更改<p class="stspan"><span id="1stspan">1</span></p>附加元素的 innerHTML。 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这有效，但它改变了初始跨度的innerHTML，但我需要改变附加跨度的innerHTML
3 个解决方案
解决方案1
2 2020-12-25 06:48:03
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>
解决方案2
1 2020-12-25 07:03:38
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>
解决方案3
1 2020-12-25 07:29:20
I assume that you have the following HTML.我假设您有以下 HTML。
<p class="stspan"><span id="1stspan">1</span></p>
<button id="counter">Increment</button>
Here is the updated jQuery code for it.这是更新的 jQuery 代码。
$('#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 .我已经从on中删除#addone 。
Suggestion: If you're using jQuery, then what not use $("#1stspan") and .val() ?建议：如果您使用的是 jQuery，那么什么不使用$("#1stspan")和.val() ？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.