DOM
Elementen manipuleren

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


Klonen elementen

Een element kan worden gekloond door de methode cloneNode aan te roepen. Als de eerste parameter die wordt doorgegeven aan cloneNode true , worden de cloneNode van het origineel ook gekloond. 

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

Een element toevoegen

In dit voorbeeld maken we een nieuw lijstelement met de tekst "nieuwe tekst" en selecteren we de eerste ongeordende lijst en het eerste lijstelement. 

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

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

Bij het invoegen van een element doen we dit onder het bovenliggende element, en net voor een bepaald onderliggend element van dat bovenliggende element. 

parentElement.insertBefore(newElement, nextSibling);

Het nieuwe element wordt ingevoegd onder parentElement en net voor nextSibling .

Wanneer men een element wil invoegen als het laatste onderliggende element van parentElement , kan het tweede argument null . 

parentElement.insertBefore(newElement, null);

Het nieuwe element wordt onder parentElement ingevoegd als het laatste kind.

In plaats daarvan kan appendChild() worden gebruikt om het kind eenvoudig toe te voegen aan de kinderen van het bovenliggende knooppunt. 

parentElement.appendChild(newElement);

Het nieuwe element wordt onder parentElement ingevoegd als het laatste kind.

Een element vervangen

In dit voorbeeld maken we een nieuw lijstelement met de tekst "nieuwe tekst" en selecteren we de eerste ongeordende lijst en het eerste lijstelement. 

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

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

Om een element te vervangen, gebruiken we replaceChild : 

parentElement.replaceChild(newElement, nextSibling);

nextSibling wordt verwijderd uit de DOM. In plaats daarvan staat nu newElement .

Element verwijderen

Een element kan worden verwijderd door remove() aan te roepen. Als alternatief kan men removeChild() aanroepen op zijn ouder. removeChild() betere browserondersteuning dan remove() . 

element.remove();

element , en alle bijbehorende childnodes, worden verwijderd uit de DOM. 

parentElement.removeChild(element);

element , en alle bijbehorende childnodes, worden verwijderd uit de DOM.

In elk geval kan men deze knoop op een later tijdstip in de DOM invoegen, zolang er nog verwijzingen naar deze knoop zijn.

Methoden toevoegen en voorafgaan

JavaScript heeft nu de methoden Toevoegen en Prepend die aanwezig waren in jQuery

Het belangrijkste voordeel van append en prepend is anders dan appendChild en insertBefore , het kan elk willekeurig aantal argumenten hebben, zowel HTML-elementen als platte tekst (die worden geconverteerd naar tekstknooppunten).

Om toe te voegen zeg 1 div, 1 tekstknooppunt en 1 span 

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

Hiermee wordt de pagina in de volgende structuur gewijzigd 

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

Om hetzelfde in lichaam voor te bereiden

Gebruik 

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

Hiermee wordt de pagina in de volgende structuur gewijzigd 

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

Merk op dat browserondersteuning dat is

Chrome 54+
Firefox 49+
Opera 39+

Lees meer op MDN

append

Vooraan toevoegen



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow