Dodawanie elementu obok innego

Metoda insertAdjacentElement pozwala na dodanie elementu względem już istniejącego w drzewie DOM. Za pomocą niej możesz dodać nowy element "przed" lub "za" już istniejącym.

Wywodzi się ona z interfejsu: Element. Żeby ją wywołać, musisz posiadać referencję do już istniejącego elementu w DOM.

Przykład:

HTML:

<div id="content">Some content</div>

Załóżmy, że chcesz dodać nowy element "za" elementem o id: content.

JavaScript:

const contentEl = document.getElementById('content');
const newElement = document.createElement('div');
newElement.innerText = 'New element';

content.insertAdjacentElement('afterend', newElement);

Wynik:

HTML:

<div id="content">Some content</div>
<div>New element</div>

Metoda insertAdjacentElement przyjmuje dwa parametry.

Pierwszy parametr to pozycja, w której ma zostać umieszczony element obok istniejącego. Przyjmuje następujące wartości:

1. beforebegin — Doda nowy element "przed"
2. afterbegin — Doda nowy element w środku "przed" pierwszym elementem dzieckiem
3. beforeend — Doda nowy element w środku "za" ostatnim elementem dzieckiem
4. afterend — Doda nowy element "za"

Najlepiej to zilustruje następujący przykład:

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  Some content
  <!-- beforeend -->
</div>
<!-- afterend -->

Drugi parametr to element, który ma zostać dodany.

Sposób 1: Klawiatura + mysz

Wciśnij przycisk Alt i następnie zlokalizuj miejsce, w którym chcesz umieścić dodatkową karetkę. Wciśnij lewy przycisk myszy.

Sposób 2: Klawiatura

Możesz umieścić dodatkowe karetki poniżej lub powyżej aktualnej lokalizacji korzystając tylko z klawiatury.

Wciśnij dwa razy przycisk Ctrl (za drugim kliknięciem nie zwalniaj klawisza), używając strzałek góra/dół na klawiaturze możesz dodawać nowe karetki.

W czerwcu opublikowałem 1 wpis:

Webstorm:

1. Praca z JSDoc

Przeczytałem 1 książkę:

1. Unit Testing Principles, Practices, and Patterns — Vladimir Khorikov

Przesłuchałem 6 audiobooków:

1. Feel Good Productivity — Ali Abdaal
2. Korona śniegu i krwi — Elżbieta Cherezińska
3. Ludzkie dzieci — P.D. James
4. Ostatnie życzenie — Andrzej Sapkowski
5. Tekst — Dmitry Glukhovsky
6. Artemis — Andy Weir

Webstorm i JSDoc

Tworzenie dokumentacji za pomocą JSDoc można zautomatyzować. Wystarczy, że przed funkcją napiszesz: /** i naciśniesz klawisz Enter:

/**function sum(a, b) {
	return a + b;
}

Zostanie wygenerowana dokumentacja:

/**
 * 
 * @param a
 * @param b
 * @returns {*}
 */
function sum(a, b) {
	return a + b;
}

JSDoc i Typescript

Dodatkowo można poinformować Webstorm, żeby stworzył dokumentację kodu wraz z typami danych.

Czyli mając kod:

/**function sum(a: number, b: number): number {
    return a + b;
}

Możesz wygenerować to:

/**
 *
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function sum(a: number, b: number): number {
    return a + b;
}

Żeby tak się stało, upewnij się, że jedna opcja w ustawieniach jest zaznaczona.

Przejdź do Settings (CTRL + ALT + S) -> Editor -> Code Style -> TypeScript. Zakładka: Code Generation. Sekcja Comments i zaznacz opcję: Include types in JSDoc.

W maju opublikowałem 2 wpisy:

JavaScript:

1. Jak filtrować dane z dwóch zbiorów?
2. Jak zresetować listę?

Przeczytałem 2 książki:

1. Ogień i krew część 1 — George R.R. Martin
2. Mroczna materia — Blake Crouch

Przesłuchałem 9 audiobooków:

1. Pieśń Lodu i Ognia. Tom 1. Gra o tron — George R.R. Martin
2. To nie jest Miami — Melchor Fernanda
3. Miasto ślepców — Jose Saramago
4. Pokrzywa i kość — Kingfisher T.
5. Gościni — Marcin Napiórkowski
6. Cała prawda o planecie Ksi — Janusz A. Zajdel
7. Pieśń Lodu i Ognia. Tom 2. Starcie Królów — George R.R. Martin
8. Ziemiomorze. Najdalszy brzeg — Ursula K. Le Guin
9. Pragnienie — Jozef Karika