I have a span inside a paragraph and want to be able to change the paragraph text and the span text from button clicks. Right now when I call the function the paragraph is updated but the span disappears.
<p id = "a">Some text to change <span id = "b" onmouseenter="test()">click!</span></p>
function test() {
$("#a").html("New text here");
$("#b").html("click again!");
}
If you change the HTML of the parent p, it will remove everything inside it. However, you can restructure your html to have two spans inside the p and update the text of those.
Here's an example with #c as the first span and #b as the second:
function test() {
$("#c").text("New text here ");
$("#b").text("click again!");
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id = "a"><span id = "c">Some text to change </span><span id = "b" onmouseenter="test()">click!</span></p>