К добавить строку в html через js?

Question

[maks78945]

Добрый день!
Подскажите как получить корректный результат, то что нагуглил не получалось применить

есть вот такой код html:

<div class="os-message-success js-client-payment-form-block">
    <strong>Оплата згідно договору</strong>
    <br>
    <strong>Сумма к оплате: 200.000 UAH</strong>
    <br>
    <br>
</div>

необходимо изменить код так что бы получить в результате:

<div class="os-message-success js-client-payment-form-block">
    <strong>Оплата згідно договору</strong>
    <br>
    <strong>Сумма к оплате: 200.000 UAH</strong>
    <br>
    <strong>К зачислению: 195.000 UAH</strong>
    <br>
</div>

сумма 195 будет считаться в процентном соотношении от 200

Пробовал:

document.getElementsByClassName('os-message-success js-client-payment-form-block').innerHTML

но в результате получаю undefined

Answer 1

[0xD34F]

document.getElementsByClassName('os-message-success js-client-payment-form-block').innerHTML

Во-первых, getElementsByClassName возвращает не один элемент, а коллекцию. Так что прежде чем пытаться получать свойства элемента, надо его из коллекции извлечь - по индексу.

Во-вторых, innerHTML возвращает всю внутреннюю разметку элемента. Что вы с ней собирались делать? Было бы разумнее добраться до вложенного элемента strong - и текст из него достать можно, и новый элемент вставить рядом с его соседом не проблема:

const strong = document.querySelector('.os-message-success br + strong');
const { nextElementSibling: br, textContent: text } = strong;
const sum = text.split(': ')[1].replace(/[\d+.]+/, m => (m * 0.975).toFixed(3));
br.insertAdjacentHTML('afterend', `<strong>К зачислению: ${sum}</strong>`);