DOM
Manipulowanie elementami

Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP React SVG
Szukaj…


Klonowanie elementów

Element można sklonować, wywołując na cloneNode metodę cloneNode . Jeśli pierwszy parametr przekazany do cloneNode jest true , elementy potomne oryginału również zostaną sklonowane. 

var original = document.getElementsByTagName("li")[0];
var clone = original.cloneNode(true);

Dodawanie elementu

W tym przykładzie tworzymy nowy element listy z tekstem „nowy tekst” i wybieramy pierwszą nieuporządkowaną listę oraz jej pierwszy element listy. 

let newElement = document.createElement("li");
newElement.innerHTML = "new text";

let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");

Wstawiając element, robimy to pod elementem nadrzędnym i tuż przed określonym elementem podrzędnym tego elementu nadrzędnego. 

parentElement.insertBefore(newElement, nextSibling);

Nowy element jest wstawiany w parentElement i tuż przed nextSibling .

Gdy chcemy wstawić element jako ostatni element potomny elementu parentElement , drugi argument może mieć null . 

parentElement.insertBefore(newElement, null);

Nowy element jest wstawiany pod parentElement jako ostatnie dziecko.

Zamiast tego można użyć appendChild() aby po prostu dołączyć dziecko do dzieci węzła nadrzędnego. 

parentElement.appendChild(newElement);

Nowy element jest wstawiany pod parentElement jako ostatnie dziecko.

Zastąpienie elementu

W tym przykładzie tworzymy nowy element listy z tekstem „nowy tekst” i wybieramy pierwszą nieuporządkowaną listę oraz jej pierwszy element listy. 

let newElement = document.createElement("li");
newElement.innerHTML = "new text";

let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");

Aby zamienić element, używamy replaceChild : 

parentElement.replaceChild(newElement, nextSibling);

nextSibling jest usuwany z DOM. Na jego miejscu jest teraz newElement .

Usuwanie elementu

Element można usunąć, wywołując na nim funkcję remove() . Alternatywnie można wywołać removeChild() na removeChild() nadrzędnym. removeChild() ma lepszą obsługę przeglądarki niż remove() . 

element.remove();

element i wszystkie jego childnodes są usuwane z DOM. 

parentElement.removeChild(element);

element i wszystkie jego childnodes są usuwane z DOM.

W każdym razie można wstawić ten węzeł do DOM w późniejszym czasie, o ile nadal istnieją odniesienia do tego węzła.

Metody dołączania i dodawania

JavaScript ma teraz metody Append i Prepend, które były obecne w jQuery

Główną zaletą append i prepend jest to, w przeciwieństwie do appendChild i insertBefore , może przyjmować dowolną liczbę argumentów, zarówno element HTML, jak i zwykły tekst (które zostaną przekonwertowane na węzły tekstowe).

Aby dołączyć powiedzmy 1 div, 1 węzeł tekstowy i 1 rozpiętość 

document.body.append(document.createElement('div'),"Hello world",document.createElement('span'))

Spowoduje to zmianę strony na następującą strukturę 

<body>
      .....(other elements)
      <div></div>
      "Hello World"
      <span></span>
</body>

Aby dodać to samo w ciele

Posługiwać się 

document.body.prepend(document.createElement('div'),"Hello world",document.createElement('span'))

Spowoduje to zmianę strony na następującą strukturę 

<body>
      <div></div>
      "Hello World"
      <span></span>
      .....(other elements)
</body>

Pamiętaj, że obsługiwane są przeglądarki

Chrome 54+
Firefox 49+
Opera 39+

Czytaj więcej na MDN

Dodać

Przygotuj



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow