DOM
Manipulera element

Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP React SVG
Sök…


Kloningselement

Ett element kan klonas genom att cloneNode på den. Om den första parametern som skickas till cloneNode är true , cloneNode barnen från originalet. 

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

Lägga till ett element

I det här exemplet skapar vi ett nytt listelement med texten "ny text" och väljer den första oordnade listan och dess första listaelement. 

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

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

När vi sätter in ett element gör vi det under överordnade element, och strax före ett visst underordnad element i det överordnade elementet. 

parentElement.insertBefore(newElement, nextSibling);

Det nya elementet infogas under parentElement och strax före nextSibling .

När man vill infoga ett element som det sista parentElement i parentElement kan det andra argumentet vara null . 

parentElement.insertBefore(newElement, null);

Det nya elementet infogas under parentElement som det sista barnet.

Istället kan appendChild() användas för att helt enkelt lägga till barnet till föräldernodens barn. 

parentElement.appendChild(newElement);

Det nya elementet infogas under parentElement som det sista barnet.

Byta ut ett element

I det här exemplet skapar vi ett nytt listelement med texten "ny text" och väljer den första oordnade listan och dess första listaelement. 

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

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

För att ersätta ett element använder vi replaceChild : 

parentElement.replaceChild(newElement, nextSibling);

nextSibling tas bort från DOM. I stället är nu newElement .

Ta bort ett element

Ett element kan tas bort genom att ringa remove() på det. Alternativt kan man ringa removeChild() på sin förälder. removeChild() har bättre webbläsarsupport än remove() . 

element.remove();

element och alla dess underordnare tas bort från DOM. 

parentElement.removeChild(element);

element och alla dess underordnare tas bort från DOM.

I alla fall kan man infoga denna nod i DOM vid en senare tidpunkt så länge det fortfarande finns referenser till denna nod.

Lägg till och förbered metoder

JavaScript har nu Append och Prepend-metoderna som fanns i jQuery

Den största fördelen med att append och prepend är till skillnad från appendChild och insertBefore , det kan ta valfritt antal argument antingen HTML-element eller ren text (som kommer att konverteras till textnoder).

För att lägga till säg 1 div, 1 textnod och 1 span 

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

Detta kommer att ändra sidan till följande struktur 

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

Att bero detsamma i kroppen

Använda sig av 

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

Detta kommer att ändra sidan till följande struktur 

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

Observera att webbläsarstöd är

Chrome 54+
Firefox 49+
Opera 39+

Läs mer på MDN

Bifoga

Addera till början



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow