Изменить содержимое класса span с помощью JavaScript

Мне нужно изменить содержимое промежутков с именем класса, используя JavaScript. Я предпочитаю JavaScript, а не jQuery, потому что это базовый сайт, и он не загружает файл jQuery, и я бы не хотел добавлять файл только для этого. Вот что я пробовал:

HTML:

blah blah blah <span class="new"></span> blah blah blah

JavaScript во внешнем файле JavaScript:

document.getElementsByClassName('.new')[0].innerHTML = 'new text here';

Надеялся, что это появится как: бла-бла-бла новый текст здесь бла-бла-бла

Сделал поиск, но нашел только решения ElementID.


javascript html innerhtml getelementsbyclassname
person midknyte    schedule 28.03.2016    source источник
comment
'.new' без точки, поэтому document.getElementsByClassName('new')[0].innerHTML   -  person The Process    schedule 29.03.2016
comment
Я удалил точку, но она все еще не работает. Я должен был упомянуть, что я пробовал это также. Будет ли иметь значение тот факт, что мой внешний файл js загружен непосредственно перед тегом ‹/body›? Или [0] может быть? Примечание. Все остальные скрипты в файле js работают нормально, поэтому он загружается.   -  person midknyte    schedule 29.03.2016
comment
Согласно этой скрипте, она работает нормально. Можете ли вы предоставить код, который воспроизводит вашу проблему?   -  person 4castle    schedule 29.03.2016
comment
спасибо за создание скрипки, очень помогло увидеть, как она работает. у меня все еще не работало, так что с сайтом что-то странное.   -  person midknyte    schedule 29.03.2016

Ответы (5)


arrow_upward
3
arrow_downward

Почти готово. Просто удалите . из class name. Причина в том, что когда вы вызываете метод getElementsByClassName. Он ищет во всем документе только имена классов. Поэтому вам не нужно ставить . перед именем класса.

document.getElementsByClassName('new')[0].innerHTML = 'new text here';
person M Sohaib Khan    schedule 29.03.2016
comment
Спасибо за пояснение, не понял. - person midknyte; 29.03.2016
comment
Рад, что это помогает. @midknyte - person M Sohaib Khan; 29.03.2016

arrow_upward
2
arrow_downward

Пробовал код на другом сайте на том же хостинге, все равно не работает. Я изменил код на основе кода elementID, который нашел на аналогичном сайте на их хосте, и это сработало:

var newText = document.getElementsByClassName('new')[0];
newText.innerHTML = 'new text here';

Не знаю почему, но это сработало. Спасибо за ответы!

person midknyte    schedule 29.03.2016
comment
Думаю, я знаю, почему. См. этот вопрос. Если вам нужно наиболее стабильное и предсказуемое решение, используйте событие onload. - person 4castle; 29.03.2016

arrow_upward
1
arrow_downward

Не ставьте точку перед новым.

document.getElementsByClassName('new')[0].innerHTML = 'new text here';

person Wowsk    schedule 28.03.2016
comment
Добавил новый комментарий выше. Спасибо. - person midknyte; 29.03.2016

arrow_upward
0
arrow_downward

Удалите точку . из '.new'. Это подразумевается, поскольку функция ищет только классы.

Обновление: согласно этот вопрос, да, возможно, размещение вашего кода JavaScript внизу все еще не всегда достаточно, чтобы гарантировать полную загрузку DOM. Замену придется делать после document.onload.

document.onload = function() {
    document.getElementsByClassName('.new')[0].innerHTML = 'new text here';
}
person 4castle    schedule 28.03.2016
comment
Добавил новый комментарий выше. Спасибо. - person midknyte; 29.03.2016
comment
Я обновил свой ответ, чтобы решить вашу проблему. - person 4castle; 29.03.2016
comment
Спасибо за это. Не уверен, почему, но использование переменной сработало. - person midknyte; 29.03.2016

arrow_upward
-1
arrow_downward

Как уже было сказано, удалите точку ('.') из вашего селектора. Если вы хотите выбирать классы таким образом, я бы рекомендовал использовать document.querySelector или document.querySelectorAll :)

person Jannik Rasmussen    schedule 29.03.2016
comment
Это было бы плохим решением. Функции querySelector намного медленнее и здесь не нужны. - person 4castle; 29.03.2016
comment
Добавил новый комментарий выше. Спасибо. - person midknyte; 29.03.2016