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

[12345678]

Имеется вот такой код, при нажатии на кнопку изменяет надпись, добавляет 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"
        });

[ksa]

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

<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>

[12345678]

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

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

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

[рони]

Только вот этот код
style="padding-left: 20px; cursor: wait;"
должен добавляться кнопке input,

https://learn.javascript.ru/styles-and-classes

[12345678]

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

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

[ksa]

Вот так добавил.
o.setAttribute("style", "padding-left:20px;cursor:wait;");

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

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

[12345678]

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

[ksa]

Я пробовал их вписывать, но чего то скрипт вовсе переставал работать

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

<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>