Заменить определенные значения li на новый элемент li, с помощью replaceWidth

Question

Мое решение

<ul id="ul">
    <li>1</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>1</li>
</ul>

let newLi = document.createElement('li');
newLi.innerHTML = 'test';
for (let li of ul.querySelectorAll('li')) {
    if (li.textContent == "1") {
        li.replaceWith(newLi);
    }
}

Но в результате получается, что заменяется только последний li, а первые два куда-то пропадают

Answer 1

Ваш новый элемент постоянно перемещается со старого места на новое при замене на него, а на его месте ничего не остаётся. Вам нужно создавать для каждой замены новый элемент.

for (let li of ul.querySelectorAll('li')) {
    if (li.textContent == "1") {
        let newLi = document.createElement('li');
        newLi.innerHTML = 'test';
        li.replaceWith(newLi);
    }
}

<ul id="ul">
    <li>1</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>1</li>
</ul>

БЛОГ НА HUSL

Заменить определенные значения li на новый элемент li, с помощью replaceWidth

Ответы (1 шт):