Vyměňte prvek nefunguje i přes tyto všechny kroky. Coverting na Pole taky nefunguje

Question 1

Jsem se snažil nahradit h2 pomocí JS. Dostávám Uncaught TypeError: Failed to execute 'replaceChild' on 'Node': parameter 2 is not of type 'Node'.

Zkoušel jsem převod:

let prevHeading = document.getElementsByClassName('my-title');
prevHeading = Array.from(prevHeading);

nefunguje.

<body>
  <div id="outer-box" style="margin: 20px;">
    <h2 class="my-title">OLD TITLE</h2>
    <div class="inner-box">
      <ul class="main-list">
        <li class="list-item">List Item 1</li>
        <li class="list-item">List Item 2</li>
        <li class="list-item">List Item 3</li>
        <li class="list-item">List Item 4</li>
        <li class="list-item">List Item 5</li>
      </ul>
    </div>
  </div>
</body>

const newHeading = document.createElement('h2');
newHeading.className = 'my-title';
newHeading.appendChild(document.createTextNode('NEW TITLE'));
const prevHeading = document.getElementsByClassName('my-title');
const outerBox = document.querySelector('#outer-box');
outerBox.replaceChild(newHeading, prevHeading);

Mohla bych použít prevHeading[0] ale já chci jen vědět, proč to nefunguje. To také funguje s:

const prevHeading = document.querySelector('.my-title');

Question 2

Podle mého názoru, složité věci.

Stačí použít querySelector a InnerHtml nahradit název :

var title = document.querySelector(".my-title") ;
title.innerHTML = "NEW TITLE" ;

Question 3

Tvůj kód funguje jako posted tak dlouho, jak máte přístup jednotlivých uzlů z HTMLCollection vrácené getElementsByClassName().

// This works to convert the HTMLCollection to an Array
let prevHeading_example = document.getElementsByClassName('my-title');
prevHeading_example = Array.from(prevHeading_example);
console.log('prevHeading array: ', prevHeading_example);

// This whole block works so long as you access the individual node 'prevHeading[0]'
const newHeading = document.createElement('h2');
newHeading.className = 'my-title';
newHeading.appendChild(document.createTextNode('NEW TITLE'));

const prevHeading = document.getElementsByClassName('my-title');
const outerBox = document.querySelector('#outer-box');
outerBox.replaceChild(newHeading, prevHeading[0]); // <-- access node at index 0

<body>
  <div id="outer-box" style="margin: 20px;">
    <h2 class="my-title">OLD TITLE</h2>
    <div class="inner-box">
      <ul class="main-list">
        <li class="list-item">List Item 1</li>
        <li class="list-item">List Item 2</li>
        <li class="list-item">List Item 3</li>
        <li class="list-item">List Item 4</li>
        <li class="list-item">List Item 5</li>
      </ul>
    </div>
  </div>
</body>

Rija Manohisoa · Answer 1 · 2021-11-23T11:36:20

1

Podle mého názoru, složité věci.

Stačí použít querySelector a InnerHtml nahradit název :

var title = document.querySelector(".my-title") ;
title.innerHTML = "NEW TITLE" ;

Rija Manohisoa

2021-11-23 11:36:20

Možná jste si všimli, jsem nový JS a snaží věci ven. Byl jsem zvědavý, proč to nefunguje přesto, že tam byly i jiné možnosti. Každopádně, cením si vaší odpověď.

junior_dev

Pravděpodobně na OP řešení je robustnější a určitě dobré cvičení. innerHTML zatímco jednoduché není vždy nejlepší řešení.

pilchard

Více k věci by bylo, aby jednoduše nahradit textContent vrácené prvek. title.textContent = "NEW TITLE" ;

pilchard

pilchard · Answer 2 · 2021-11-23T12:29:18

Tvůj kód funguje jako posted tak dlouho, jak máte přístup jednotlivých uzlů z HTMLCollection vrácené getElementsByClassName().

// This works to convert the HTMLCollection to an Array
let prevHeading_example = document.getElementsByClassName('my-title');
prevHeading_example = Array.from(prevHeading_example);
console.log('prevHeading array: ', prevHeading_example);

// This whole block works so long as you access the individual node 'prevHeading[0]'
const newHeading = document.createElement('h2');
newHeading.className = 'my-title';
newHeading.appendChild(document.createTextNode('NEW TITLE'));

const prevHeading = document.getElementsByClassName('my-title');
const outerBox = document.querySelector('#outer-box');
outerBox.replaceChild(newHeading, prevHeading[0]); // <-- access node at index 0

<body>
  <div id="outer-box" style="margin: 20px;">
    <h2 class="my-title">OLD TITLE</h2>
    <div class="inner-box">
      <ul class="main-list">
        <li class="list-item">List Item 1</li>
        <li class="list-item">List Item 2</li>
        <li class="list-item">List Item 3</li>
        <li class="list-item">List Item 4</li>
        <li class="list-item">List Item 5</li>
      </ul>
    </div>
  </div>
</body>

tak daleko, jak jsem pochopil, replaceChild() vyžaduje uzly a funkce getElementsByClassName pouze se vrací HTML Kolekci , takže buď budu muset použít index uzlu, nebo úplně jiné metody, jako je querySelector(). Děkuji vám, lidi.

Vyměňte prvek nefunguje i přes tyto všechny kroky. Coverting na Pole taky nefunguje

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii