Как изменить текст в span

Как изменить содержание span на чистом JS

необходимо поменять содержание span с «>» на »

function ReadMore() < var more = document.querySelector("#more"); var display = window.getComputedStyle(more).display; var readmore = document.querySelector("#readmore") var arrow = document.querySelector("#arrow") var mStyle = window.getComputedStyle ? getComputedStyle(more, null) : more.currentStyle; if (mStyle.display === "none") < more.style.display = "block"; readmore.innerHTML = "Close" arrow.innerText = "else < more.style.display = "none"; readmore.innerHTML = "Read More" arrow.innerText = ">"; > >

   
 Express Services
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aliquid tempora maxime tempore cupiditate, ipsam quidem. Recusandae voluptates laborum minus et cumque, quam odio aperiam quas dolorem, delectus porro quia?

Отслеживать
33.1k 2 2 золотых знака 33 33 серебряных знака 64 64 бронзовых знака
задан 29 ноя 2019 в 17:29
77 1 1 серебряный знак 8 8 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Вы попутали селекторы. # обозначает поиск по id, а для поиска по классу нужен префикс . . У вас arrow именно класс
Когда вы пишете readmore.innerHTML = вы уничтожаете внутренний span
Изначально у вас текст показан, а на кнопке написано Read More

function ReadMore() < var more = document.querySelector("#more"); var display = window.getComputedStyle(more).display; var readmore = document.querySelector("#readmore") var arrow = document.querySelector(".arrow") var mStyle = window.getComputedStyle ? getComputedStyle(more, null) : more.currentStyle; if (mStyle.display === "none") < more.style.display = "inline"; readmore.innerHTML = "Close" arrow.innerText = "else < more.style.display = "none"; readmore.innerHTML = "Read More" arrow.innerText = ">"; > >

#more

   
 Express Services
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aliquid tempora maxime tempore cupiditate, ipsam quidem. Recusandae voluptates laborum minus et cumque, quam odio aperiam quas dolorem, delectus porro quia?

Отслеживать
ответ дан 29 ноя 2019 в 17:49
Anton Shchyrov Anton Shchyrov
33.1k 2 2 золотых знака 33 33 серебряных знака 64 64 бронзовых знака

var button = document.querySelector('#readmore'); button.addEventListener('click', changeArrowDirection); function changeArrowDirection(e) < var arrow = document.querySelector('.arrow'); arrow.innerText == '>' ? arrow.innerText = ''; >

Отслеживать
ответ дан 29 ноя 2019 в 17:42
user355286 user355286
никогда не видал такого использования тернарного оператора. Оно точно работает?
29 ноя 2019 в 17:46
какого «такого» ? Обычный тернарный оператор.
– user355286
29 ноя 2019 в 17:49

@hu-fo-of-ex Ну, как правило его используют чтобы куда-нибудь вернуть значение. В таком виде: arrow.innerText = ( arrow.innerText == «>» ) ? «<" : ">«; А у вас он похож на обычный if )

29 ноя 2019 в 18:01

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

– user355286
29 ноя 2019 в 18:06

Например в таком виде у вас происходит дублирование кода. Вы в двух местах присваиваете значение arrow.innerText

29 ноя 2019 в 18:08

let toggler = document.querySelectorAll('.toggler'); let jsid = document.querySelectorAll('.js-set-id'); for (let i = 0; i < toggler.length; i++) < toggler[i].setAttribute('for', "js-id-" + i); jsid[i].id = "js-id-" + i; >// JS - чтобы не возиться с id / for. можно и вручную, если там пара элементов.

.hidden, .js-set-id < display: none; >.more < display: inline-block; border: 1px solid #aaa; padding: 3px 6px; background-image: linear-gradient(#fff, #ddd, #ccc); cursor: pointer; >.more:active < background-image: linear-gradient(#ccc, #ddd, #fff); >.more::before < content: "Read More >"; > .js-set-id:checked ~ .toggler .more::before < content: "Close .js-set-id:checked ~ p .hidden

  Lorem ipsum dolor ame. More text bubu, More text bubu, More text bubu, More text bubu, More text bubu, More text bubu, More text bubu, More text bubu, More text bubu, More text bubu, 





 
 
  Lorem ipsum dolor ame. More text bubu, More text bubu, More text bubu, More text bubu, More text bubu, More text bubu, More text bubu,

Как изменить span через jquery, без id или класса?

jQuery позволяет искать элементы по содержащемуся внутри тексту.

В вашем случае попробуйте сделать так:
$('span:contains("test2")').html('новый текст');

Ответ написан более года назад
Комментировать
Нравится 1 Комментировать
MrColdCoffee @MrColdCoffee

if(element.lastChild.data == 'test2') element.lastChild.data = 'NEW';
>

Ответ написан более года назад
Комментировать
Нравится Комментировать

Mesuti

Ответ написан более года назад
Комментировать
Нравится Комментировать
Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

JavaScript

Почему при объединении двух объектов в один они автоматически сортируются?

1 подписчик
3 часа назад
59 просмотров

javascript, как изменить текст в span? Есть span Как в этом span поменять значение взятое из переменной javas

Только id по стандарту должен начинаться с буквы, а не цифры.

Мамаз Муткин

Илларион, да, прав, а если через jq - $('#1").text(javas)

Амина Алипханова

Не согласен с лучшим ответом. Гораздо проще через JQuery:
$('#айди').html(название переменной)

Людмила Малинина

Установить элементу текстовый контент:
1. document.getElementById("1").textContent = javas;
2. document.getElementById("1").innerText = javas;

Изменить html элемента:
document.getElementById("1").innerHTML = javas;