Вставка Html в Span

166

20 декабря 2017, 23:39

Есть такой код:

<span title="Just span elem"> 
  <i class="logo-icon"> 
    //some logo 
  </i> 
  "10.00" 
</span>

Мне нужно с помощью JS изменять значение в span. Делаю это так: var span = document.getElementsByTagName('span')[1].innerHTML = "11.12"; Все работает, но лого тоже пропадает когда меняю значение. Как можно его поменять, что бы при этом лого осталось на месте?

Answer 1

Наверное проще всего:

var currentHTML = document.getElementsByTagName('span')[1].innerHTML;
var currentHTML = currentHTML.slice(0,-5);
document.getElementsByTagName('span')[1].innerHTML = currentHTML+"11.12";

Answer 2

Оператор += должен помочь так как он добавит данные в элемент, а не заменит их. Ответ на эту тему уже дан, но я могу предложить лишь сократить его код:

document.getElementsByTagName('span')[1].innerHTML += "11.12";

Если внутри элемента уже есть данные то ваш код неоптимальный. Я бы посоветовал добавить еще один блок <span> внутри данного и работать с ним напрямую вашим же кодом, так будет проще чем изобретать велосипед заново делая поиск картинки в элементе и отделяя ее от прочего содержимого тега что бы исправить лишь 5 символов.

HTML:

<span title="Just span elem">
  <i class="logo-icon">
    //some logo
  </i>
  <span id="number">10.00</span>
</span>

JS:

document.getElementsById('number').innerHTML = "11.12";

Answer 3

/*
   определяем DOM узел в переменную node
   node.childNodes -- коллекция дочерних элементов узла
   node.childNodes[node.childNodes.length-1] -- последний узел 
   textContent --- строка
*/
var node = document.getElementsByTagName('span')[0]
    node.childNodes[node.childNodes.length-1].textContent = "11.12"