Jak zamienić tag znacznika na inny wewnątrz kodu HTML za pomocą JavaScript?
Jeżli za pomocą jQuery to replaceWith
Co znaczy zmienić TAG?
W DOM TagName nie można zmienić ale:
- Chodzi zmianę typu elementu w drzewie DOM? ( stworzyć nowy, przepiąć wszystkie child'y i usunąć stary ).
- Zmianę w podglądzie kodu źródłowego? ( nie da się )
Najważniejsze pytanie... Jaki masz w tym cel? Bo wg mnie wygląda to na działanie mocno bezsensowne.
Podgląd
@katakrowa: Weźmy dokument z nagłówkiem h1 z pewną treścią pod nim, a w tym tekście jest ściąganie strony, w którym też jest h1, ale z normalnym tekstem, i chcę to ostatnie h1 zamienić na h2. Czyli chcę załadować z poziomu pierwszego dokumentu z h1 drugi dokument z h1, a to zamieniamy h2, bo ten drugi dokument jest podrozdziałem tego pierwszego. A tagiem TAG może być np. H2.
Ok. Ale w jakim celu?
W JavaScript to i tak nie zmieni postrzegania dokumentu z punku widzenia SEO czy poprawności struktury HTML.
Czy może chodzi o style...
@katakrowa: Tu nie chodzi o style, tylko zamianę tagu z h1 na h2 w drugim dokumencie w pierwszym, w którym jest h1. A znaczniki H z liczbą, np.: h1,h2,h3,h4,h5,h6, ro zawartość jest w kierunku od rozmiaru czcionki największego do najmniejszego. A ten drugi dokument jest ładowanym dynamicznie w pierwszym dokumencie, i tam dynamicznie jest zamieniany tag, a w drugim dokumencie, nie wiadomo jakie tagi, np.: h1,h2, dalej, występują, a ja chcę by był porządek.
W JS musisz wykonać 3 kroki:
- Odnaleźć tag (np. za pomocą document.querySelector albo document.getElementById, document.getElementsByClassName, document.getElementsByTagName)
- Uworzyć nowy tag, którym chcesz zastąpić stary za pomocą document.createElement
- Na koniec odwołując się do rodzica taga z pkt. 1 zamieniasz tag
Przykładowy kod:
//przy założeniu, że masz tylko jeden h1 w dokumencie
const h1 = document.querySelector('h1');
const h2 = document.createElement('h2');
h2.innerText = h1.innerText;
h1.parentNode.replaceChild(h2, h1);