Можно сделать, как предложил @Igor.
Минусы:
- Если на span есть какие-то события, или привязаны данные через dataset, то они потеряются.
- Тяжело будет менять, если у вас внутри несколько элементов. Например span, a, и еще что-либо.
var button = document.getElementById("button");
button.onclick = function() {
var p = document.getElementById("p");
var span = document.getElementById("span")
p.innerHTML = "asdf" + span.outerHTML;
}
span.addEventListener('click', () => console.log('span clicked'));
#span {
color: red;
}
<button id="button">click for me!</button>
<p id="p">123<span id="span">456</span></p>
Можно сделать, обратиться к первому node(он у нас текстовый).
Минусы:
- Текстовый node может быть не первым. Их может быть несколько.
Плюсы:
- Span не пересоздается заново.
var button = document.getElementById("button");
button.onclick = function() {
var p = document.getElementById("p");
var span = document.getElementById("span")
p.firstChild.textContent = "asdf";
}
span.addEventListener('click', () => console.log('span clicked'));
#span {
color: red;
}
<button id="button">click for me!</button>
<p id="p">123<span id="span">456</span></p>
Самый лучший способ, на мой взгляд. Поменять разметку, текст вынести в отдельный элемент. Менять его, как вам нужно.
var button = document.getElementById("button");
button.onclick = function() {
var p = document.getElementById("p");
var text = document.getElementById("text")
text.innerText = "asdf";
}
span.addEventListener('click', () => console.log('span clicked'));
#span {
color: red;
}
<button id="button">click for me!</button>
<p id="p"><span id='text'>123</span><span id="span">456</span></p>