Изменение состояния кнопки на чистом 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').addEventLis tener('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
Спасибо за уточнение. Я пробовал их вписывать, но чего то скрипт вовсе переставал работать :blink: В итоге остановился на том варианте, который привёл.

[ksa]

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

<form id='commentform'>
<button id='submit'>Тест</button>
</form>
<script>
document.querySelector('#commentform').addEventLis tener('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>