Javascript appendChild无法正常工作

时间：2020-06-12 20:43:39

标签： javascript html

我想创建一个包含3列和*行的网格。问题是与此row.appendChild(col);元素有关。此功2次运行或零次运行。没有错误，我尝试了不同的浏览器，没有任何线索。

缓冲区超载或内存是否过满？

var Jsonstring ='[{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_1e9b5.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_21c02.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_542b9.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_66721.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_8bbfd.jpg"}]';

function doShowUploadedPictures() {
  try {

    var obDaten = JSON.parse(Jsonstring);

    //
    var div = document.getElementById("uploaded");
    div.innerHTML = "";
    div.classList.add("pt-3");

    //
    var row = document.createElement("div");
    row.classList.add("row");

    //
    var icount = 1;
    for (var i in obDaten) {
      if (true) {
        var btndiv = document.createElement("div");
        btndiv.classList.add("position-absolute");
        btndiv.style = "display: none";

        var button = document.createElement("button");
        button.classList.add("btn", "btn-danger");
        button.innerHTML = "del";
        btndiv.appendChild(button);

        var img = document.createElement("img");
        if (obDaten[i].Imgname !== null) {
          img.src = obDaten[i].Imgname;
        }
        if (obDaten[i].alt !== null) {
          img.alt = obDaten[i].alt;
        }
        img.classList.add("img-thumbnail", "pt-0", "position-absolute");

        var col = document.createElement("div");
        col.classList.add("col-md-4", "position-relative");
        col.addEventListener('mouseover', function (event) {
          event.target.parentNode.childNodes[1].style = "display: flex";
        });
        col.addEventListener('mouseout', function (event) {
          event.target.parentNode.childNodes[1].style = "display: none";
        });

        //
        col.appendChild(img);
        col.appendChild(btndiv);
        row.appendChild(col);

        //
        if (icount && (icount % 3 === 0)) {
          div.appendChild(row);
          row.innerHTML = "";
        }

        icount++;
      }
    }
    div.appendChild(row);

  } catch (e) {
    console.log("Error " + e);
  }
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>


<button onclick="doShowUploadedPictures()">click</button>
<div id="uploaded"></id>
</body>
</html>

4 个答案:

答案 0 :(得分：1)

正如Leandro指出的那样，您的HTML中有一个错字，我已修复。正如半机械人指出的那样，您还删除了整行，并且应该在循环的 inside 行中追加行。我还尝试整理一下代码，以使其更易读且易于调试。 

var Jsonstring = '[{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_1e9b5.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_21c02.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_542b9.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_66721.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_8bbfd.jpg"}]';

function doShowUploadedPictures() {
  var obDaten = JSON.parse(Jsonstring);

  // uploaded DIV
  var uploaded = document.getElementById("uploaded");
  uploaded.classList.add("pt-3");

  // loop
  var icount = 1;
  for (let item of obDaten) {

    // Create elements
    var row = document.createElement("div");
    var btndiv = document.createElement("div");
    var delButton = document.createElement("button");
    var img = document.createElement("img");
    var col = document.createElement("div");

    // Classes
    row.classList.add("row");
    btndiv.classList.add("position-absolute", "btn-div");
    delButton.classList.add("btn", "btn-danger");
    img.classList.add("img-thumbnail", "pt-0", "position-absolute");
    col.classList.add("col-md-4", "position-relative");

    // Styles, content 
    btndiv.style.display = "none";
    delButton.innerHTML = "del";

    if (item.Imgname)
      img.src = item.Imgname;

    if (item.alt)
      img.alt = item.alt;

    // Build out tree
    btndiv.appendChild(delButton);
    col.appendChild(btndiv);
    col.appendChild(img);
    row.appendChild(col);

    // Add eventListeners
    col.addEventListener('mouseover', function(event) {
      var target = event.target.parentNode.querySelector('.btn-div');
      if (target)
        target.style.display = "flex";
    });

    col.addEventListener('mouseout', function(event) {
      var target = event.target.parentNode.querySelector('.btn-div');
      if (target)
        target.style.display = "none";
    });
    
    // DO STUFF WITH MODULUS 3 HERE

    // Append row, increment
    uploaded.appendChild(row);
    icount++;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <button onclick="doShowUploadedPictures()">click</button>
  <div id="uploaded"></div>
</body>

</html>

答案 1 :(得分：1)

查一下：

var Jsonstring ='[{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_1e9b5.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_21c02.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_542b9.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_66721.jpg"},{"Imgname":"http://localhost:8080/sbin/_DisplayImage/5ee3e2962d3752338c090e67_2020-06-12_8bbfd.jpg"}]';

function doShowUploadedPictures() {
  try {

    var obDaten = JSON.parse(Jsonstring);

    //
    var div = document.getElementById("uploaded");
    div.innerHTML = "";
    div.classList.add("pt-3");

    //
    var row = document.createElement("div");
    row.classList.add("row");

    //
    var icount = 1;
    for (var i in obDaten) {
      if (true) {
        var btndiv = document.createElement("div");
        btndiv.classList.add("position-absolute");
        btndiv.style = "display: none";

        var button = document.createElement("button");
        button.classList.add("btn", "btn-danger");
        button.innerHTML = "del";
        btndiv.appendChild(button);

        var img = document.createElement("img");
        if (obDaten[i].Imgname !== null) {
          img.src = obDaten[i].Imgname;
        }
        if (obDaten[i].alt !== null) {
          img.alt = obDaten[i].alt;
        }
        img.classList.add("img-thumbnail", "pt-0", "position-absolute");

        var col = document.createElement("div");
        col.classList.add("col-md-4", "position-relative");
        col.addEventListener('mouseover', function (event) {
          event.target.parentNode.childNodes[1].style = "display: flex";
        });
        col.addEventListener('mouseout', function (event) {
          event.target.parentNode.childNodes[1].style = "display: none";
        });

        //
        col.appendChild(img);
        col.appendChild(btndiv);
        row.appendChild(col);

        // This is the correct if for every 3rd round as you explained in post with the grid
        if (icount % 3 === 0) {
          div.appendChild(row);
  // To delete childs do not emtpy the element like this, because you must declare the new div
    var row = document.createElement("div");
    row.classList.add("row");

        }

        icount++;
      }
    }
    div.appendChild(row);

  } catch (e) {
    console.log("Error " + e);
  }
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>


<button onclick="doShowUploadedPictures()">click</button>
<div id="uploaded"></div>
</body>
</html>

答案 2 :(得分：0)

在您的html代码上： 您的div元素未正确关闭，您正在放置：

<div id="uploaded"></id>

您应该输入：

<div id="uploaded"></div>

答案 3 :(得分：0)

您将col设置为row的子代：

row.appendChild(col);

然后，在某些情况下，您删除row内部的所有内容

if (icount && (icount % 3 === 0)) {
    div.appendChild(row);
    row.innerHTML = ""; // here
}
相关问题
最新问题