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;

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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