Question

我无法找到一个示例，说明如何将其转换为特定的div。

我有一个div #error-list和一个数组error，其中包含任意数量的错误消息，例如：

var errors = ["First name is blank", "Last name is blank", "Company name is blank", "Email is blank"]

我想将ul li列表中的这些错误单独输出到#error-list div。

如何做到这一点？我已经看到了创建每个li的示例，但没有指定它们的输出位置。 E.g：

for (i = 0; i < myArray.length; i++) {
    var liElement = document.createElement('li');
    liElement.appendChild(myArray[i]);
}

Answer 1

当你包含jQuery时，使用jQuery。

var str = "";
errors.forEach(function(error){
    str += '<li>' + error + '</li>' // build the list
});
$('#error-list').html('<p>There were some errors</p>')
                .append('<ul>' + str + '</ul>'); // append the list

Answer 2

使用下一个代码创建元素

var myArray = ['1','2','3']
for (i = 0; i < myArray.length; i++) {
    var liElement = document.createElement('li');
    var txt = document.createTextNode(myArray[i])
    liElement.appendChild(txt);
}

重点是您必须创建文本节点，然后将其附加到li Element。

var txt = document.createTextNode(myArray[i])
liElement.appendChild(txt);

Answer 3

您也可以使用join（）和append（）

以下列方式执行此操作

Demo

var errors = ["First name is blank", "Last name is blank", "Company name is blank", "Email is blank"];
$("#error-list").empty().append(function(){
    return "<ul><li>" + errors.join("</li><li>") + "</li></ul>";
});

Answer 4

迭代错误数组并将新元素追加为字符串。

var errors = ["First name is blank", "Last name is blank", "Company name is blank", "Email is blank"];

$(document).ready(function() {
    errors.forEach(function(error) {
        $("#error-list ul").append('<li>' + error + '</li>');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="error-list">
    <ul></ul>
</div>

Answer 5

＆＃13;

var errors = ["First name is blank", "Last name is blank", "Company name is blank", "Email is blank"]

errors.forEach( function(error){
  $("ul").append("<li>"+error+"</li>");
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>

＆＃13;

Answer 6

我今天正在为“tr / td / div”这样做，它创造了奇迹。

for (i = 0; i < myArray.length; i++) {
$("#divId").append($('<li>')myArray[i]);
}

不需要结束标记。希望这有帮助

编辑

我发现这非常方便，因为你可以动态地将id分配给DOM元素，比如

   for (i = 0; i < myArray.length; i++) {
   $("#divId").append($('<li id="myLi'+i+'">')myArray[i]);
    }

并以

结束

 <li id="myLi1">
 <li id="myLi2">

等

追加“＆lt; p＆gt;”在等之前你可以使用我今天使用的这种概念:) 括号的嵌套在这里非常重要

 for (var i = 0; i < listOfNames.length; i++) {
                    $("#table").find('tbody')
                        .append($('<tr>')
                            .append($('<td style="width: 300px">')
                                .append($('<div id="div'+i+'" style="display: inline-block">'))
                                    .append($('<a >')
                                        .append($('<img src="../.gif" alt="Loading..." ' +
                                                  'id="Icon' + i + '" style="float: right">')
                                        )
                                    )
                            )
                        ).append($('<tr id="InfoRow' + i + '">')
                            .append($('<td>')
                                .append('<div id="Info' + i + '" style="display: inline-block;">')
                            )
                        );
                    $('#nameText'+i).text(listOfNames[i]);
                }

这基本上是为了给你一个想法而吐出来的

<tr>
    <td style="width: 300px"><div id="div1" style="display: inline-block"></div><a><img src=".gif" alt="Loading..."id="Icon1" style="float: right"/></a></td>
 </tr>
 <tr id="InfoRow1">
     <td><div id="Info1" style="display: inline-block;float: right"></div>/td>
 </tr>

Answer 7

<div>
  <ul>

    <li id="error1">
    </li>

    <li id="error2">
    </li>

    <li id="error3">
    </li>

  </ul>
</div>

<script>

  var cars = ["Error1", "Error2", "Error3"];

  document.getElementById("error1").innerHTML = cars[0];
  document.getElementById("error2").innerHTML = cars[1];
  document.getElementById("error3").innerHTML = cars[2];

</script>

我不确定这是否是最有效的方式，但它确实完成了我所要求的任务。

使用JS或jQuery将数组输出错误列表到特定的div中

7 个答案: