Listenelement ist nicht korrekt eingefügt

Ich stehe vor einem Problem Ich möchte ein Listenelement mit Javascript erstellen. Was ich tue, ist zuerst ein Listenelement anzuhängen. Danach neues Listenelement einfügen. Aber warum werden Artikel nicht nach Bestellung eingefügt.Listenelement ist nicht korrekt eingefügt

var refrenceNode = document.querySelector('#list'); 
 
    var newlistitem; 
 
    var check = false; 
 
    var o1 = {x: 1, y: 200, z: 500, a: 900}; 
 

 
    function extendSerialize(obj) { 
 
     for (var property in obj) { 
 
      if (!check) { 
 
       newlistitem = refrenceNode.appendChild(document.createElement('li')); 
 
       newlistitem.innerHTML = obj[property]; 
 
       check = true; 
 
      } 
 
      else { 
 
       newlistitem.parentNode.insertBefore(document.createElement('li'), newlistitem.nextSibling).innerHTML = obj[property]; 
 
      } 
 

 
     } 
 
    } 
 

 
    extendSerialize(o1);

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
</head> 
 
<body> 
 
<ul id="list"></ul> 
 
</body> 
 
</html>

Quelle

2017-04-21 Timmy Mucks

Wenn Objekte iterieren, mit einem 'für Es gibt keine Garantie dafür, dass die Eigenschaften in einer bestimmten Reihenfolge wiederholt werden. Wenn das für Sie wichtig ist, sollten Sie ein Array verwenden. –

einfach, dies zu tun, was Sie versuchen zu tun. Der insertBefore verursacht Ihnen möglicherweise unnötige Kopfschmerzen.

var referenceNode = document.querySelector('#list'); 
 
var o1 = { 
 
    x: 1, 
 
    y: 200, 
 
    z: 500, 
 
    a: 900 
 
}; 
 

 
function extendSerialize(obj) { 
 
    for (var property in obj) { 
 
    var el = document.createElement("li"); 
 
    el.innerText = obj[property]; 
 
    referenceNode.appendChild(el); 
 
    } 
 
} 
 

 
extendSerialize(o1);

<ul id="list"></ul>

Ich habe den Code genommen und kommentiert es, ließ es genau so, wie sonst:

var refrenceNode = document.querySelector('#list'); 
 
var newlistitem; 
 
var check = false; 
 
var o1 = { 
 
    x: 1, 
 
    y: 200, 
 
    z: 500, 
 
    a: 900 
 
}; 
 

 
function extendSerialize(obj) { 
 
    for (var property in obj) { 
 
    if (!check) { 
 
     // As check is set to FALSE, we'll create an LI 
 
     newlistitem = refrenceNode.appendChild(document.createElement('li')); 
 
     newlistitem.innerHTML = obj[property]; 
 
     check = true; 
 
    } else { 
 
    /**** 
 
    * So here the check is true, we have a single LI, 
 
    * and we want to use insertBefore. Here's a gotcha: 
 
    * The first insertBefore the nextSibling will insert 
 
    * AFTER the first list item. Every other LI will be 
 
    * inserted BEFORE the SECOND LI, IN REVERSE ORDER. 
 
    ****/ 
 
    newlistitem.parentNode.insertBefore(document.createElement('li'), newlistitem.nextSibling).innerHTML = obj[property]; 
 
    } 
 

 
    } 
 
} 
 

 
extendSerialize(o1);

<ul id="list"></ul>

Quelle

2017-04-21 18:37:11 Snowmonkey

Die Reihenfolge der Eigenschaften auf ein Objekt nicht gewährleistet ist, sollten Sie ein Array verwenden. So etwas wie dies funktionieren kann, wenn Sie die Eigenschaftsnamen brauchen Sie eine Reihe von kleinen Objekten verwenden

var refrenceNode = document.querySelector('#list'); 
var newlistitem; 
var check = false; 
var o1 = [1, 200, 500, 900]; 

function extendSerialize(arr) { 
    for (var i = 0; i < arr.length; i++) { 
     var item = arr[i]; 
     if (!check) { 
      newlistitem = refrenceNode.appendChild(document.createElement('li')); 
      newlistitem.innerHTML = item; 
      check = true; 
     } 
     else { 
      newlistitem.parentNode.insertBefore(document.createElement('li'), newlistitem.nextSibling).innerHTML = item; 
     } 

    } 
} 

extendSerialize(o1);

Quelle

2017-04-21 18:23:58 IrkenInvader

Listenelement ist nicht korrekt eingefügt

Antwort

Verwandte Themen