Почему не работает код? Не заменяется товар "Chocolate bar" на "Canned Fish", количеством 4 штуки

<!DOCTYPE html>

<head>
    
</head>
<body>
    <div id="cart-items">

        <div class="item">Milk 1 l.<span class="qty">x 2</span></div>
      
        <div class="item">Cola 1.5 l. <span class="qty">x 1</span></div>
      
        <div class="item">Bread<span class="qty">x 2</span></div>
      
        <div class="item">Cheese<span class="qty">x 1</span></div>
      
        <div class="item">Chocolate bar<span class="qty">x 3</span></div>
      
      </div>

      <script>
        for (let e of document.body.querySelectorAll("div")) {
            if (e.textContent.startsWith("Cola 1.5 l"))
                e.remove();
            if (e.textContent.startsWith("Chocolate bar")) {
                let newChild = document.createElement("span");
                newChild.className = "qty";
                newChild.textContent = "x 4";
                e.replaceChild(newChild, e.firstElementChild);
                e.replaceChild("Chocolate bar", e.firstChild);
            }
        }
    </script>
    
</body>
</html>

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

Автор решения: highpassion

Вы пытаетесь заменить DOM-элемент на строковое значение, в то время, как метод replaceChild() ожидает аргумент типа DOM-узел. Вам нужно из строкового значения создать текстовый узел. Для этого пригодится метод createTextNode().

for (let e of document.body.querySelectorAll("div")) {
            if (e.textContent.startsWith("Cola 1.5 l"))
                e.remove();
            if (e.textContent.startsWith("Chocolate bar")) {
                let newChild = document.createElement("span");
                newChild.className = "qty";
                newChild.textContent = "x 4";
                e.replaceChild(newChild, e.firstElementChild);
                e.replaceChild(document.createTextNode("Canned fish "), e.firstChild);
            }
        }

Ссылки для справки:

  1. replaceChild
  2. createTextNode
→ Ссылка