Изменение состояния кнопки на чистом JS
 

Имеется вот такой код, при нажатии на кнопку изменяет надпись, добавляет div и стиль. Как всё это будет выглядеть на чистом JS?

jQuery('#commentform').submit(function() {
	$(this).find("#submit").val("Отправка комментария...").attr("disabled", "disabled").before('<div class="comment-spinner"><div>').css({
            "padding-left": "20px",
            "cursor": "wait"
        });

Как вариант...

<form id='commentform'>
	<button id='submit'>Тест</button>
</form>
<script>
document.querySelector('#commentform').addEventListener('submit', _ => {
	_.preventDefault()
	const o = document.querySelector("#submit")
	o.value = 'Отправка комментария...'
	o.disabled = true
	const html = '<div class="comment-spinner" style="padding-left: 20px; cursor: wait;">comment-spinner<div>'
	o.insertAdjacentHTML('beforebegin', html)
})
</script>

ksa
Спасибо. Только вот этот код

style="padding-left: 20px; cursor: wait;"

должен добавляться кнопке input, к div стилю comment-spinner он никак не относится.
Как добавить сей код в необходимое место?

рони
Спасибо. Вот так добавил.

o.setAttribute("style", "padding-left:20px;cursor:wait;");

Есть специальные свойства...

o.style.paddingLeft = '20px'
o.style.cursor = 'wait'

ksa
Спасибо за уточнение. Я пробовал их вписывать, но чего то скрипт вовсе переставал работать :blink: В итоге остановился на том варианте, который привёл.

Для этого и делаются тестовые примеры, которые можно показать тут.
Тогда будет понятно что у тебя не получается... ;)

<form id='commentform'>
	<button id='submit'>Тест</button>
</form>
<script>
document.querySelector('#commentform').addEventListener('submit', _ => {
	_.preventDefault()
	const o = document.querySelector("#submit")
	o.value = 'Отправка комментария...'
	o.disabled = true
	o.style.paddingLeft = '20px'
	o.style.cursor = 'wait'
	const html = '<div class="comment-spinner">comment-spinner<div>'
	o.insertAdjacentHTML('beforebegin', html)
})
</script>