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

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

Возможно ли с помощью JS изменить текст внутри тегов (допустим) ? пока что использую для этой цели input type=text, но это не подходит если нужно ввывести более одной строки. Подскажите пожалуйста что-нибудь.

автор: Artem S. (08.01.2006 в 02:23) письмо автору

автор: localGhost (08.01.2006 в 03:57) письмо автору

а другого способа нет? такая конструкция будет работать везде? по моему только в MSIE.

а как такой вариант:
в нужном месте стоит тег
далее по ходу пьесы меняеться src. но у меня подгрузки страницы со скриптом не происходит.. (с iframe такое прокатывало). возможно ли добиться результата таким путем?

автор: Artem S. (08.01.2006 в 11:03) письмо автору

>> а другого способа нет? такая конструкция будет работать везде? по моему только в MSIE.
IE, Mozilla и Opera (не помню с какой версии)

>>а как такой вариант: . далее по ходу пьесы меняеться src
К src нужно добавить случайное число. Т.к. бразузер кеширует такие файлы.
И не понятно как первое связано со вторым.

Тег span

Тег span позволяет выделить кусочек текста. Сам по себе тег ничего не делает, но в сочетании с атрибутами class , id или style позволяет обратиться через CSS к тексту, который находится внутри него (к примеру, для того, чтобы сменить цвет текста, его размер и так далее).

Пример

Давайте выделим кусочек текста с помощью тега span , но оставим его таким же, как и обычный текст (так как данному span не назначены CSS стили):

это текст внутри span

Пример

А сейчас давайте попробуем тегу span назначить красный цвет с помощью атрибута style :

это текст внутри span, а это — снаружи:)

Смотрите также

• тег div ,
  который позволяет выделить целую группу тегов

Как изменить содержание 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?





 
 Read More >  

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

3 ответа 3

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

1. Вы попутали селекторы. # обозначает поиск по id, а для поиска по классу нужен префикс . . У вас arrow именно класс
2. Когда вы пишете readmore.innerHTML = вы уничтожаете внутренний span
3. Изначально у вас текст показан, а на кнопке написано 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?
 
 Read More >  

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

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

Read More >

Отслеживать
ответ дан 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';
>

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

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

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

• JavaScript
• +1 ещё

В чем заключается суть бинарного поиска неотсортированного массива?

• 1 подписчик
• 9 часов назад
• 97 просмотров