Question

我遇到问题我想用javascript创建一个列表项。我正在做的是首先附加一个列表项。之后插入新的列表项。但是为什么它没有按照订单插入物品。

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 1

无法保证对象的属性顺序，您应该使用数组。这样的东西可能有用，如果你需要属性名，你可以使用一个小对象数组

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);

Answer 2

简单地说，这将做你想做的事情。 insertBefore导致你可能不必要的头痛。

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>

我已经接受了你的代码并对其进行了评论，完全按照原样保留了它：

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>

列表项未正确插入

2 个答案: