2

Когда я изменяю текст внутри элемента <p>, содержимое <span> исчезает, и добавить его потом невозможно. Как изменить текст элемента <p> так, чтобы текст из <span> не исчез?

var button = document.getElementById("button");
button.onclick = function() {
  var p = document.getElementById("p");
  var span = document.getElementById("span")

  p.innerHTML = "asdf";

}
<button id="button">click for me!</button>
<p id="p">123<span id="span">456</span></p>

2 ответа 2

9

Можно сделать, как предложил @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>

4
p.innerHTML = "asdf" + span.outerHTML;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.