Question

我想在id为search_result的div中显示内容，我使用下面的代码，但由于innerHTML，它只显示数组的最后一个元素。任何人都可以帮我附加数据。

这是我的JavaScript代码

function myFunction($qw) {
    for ($i = 0; $i < data.length; $i++) {
        $dis = data[$i].charAt(0);
        var $n = ($dis.localeCompare($qw))
        if ($n == 0)
            document.getElementById("search_result").innerHTML = (data[$i] + "<br/>");
    }
    $i = 0;
}

这是我的HTML代码：

<div id="search_result">
</div>

Answer 1

您正在使用for.. loop中的每一步替换div的内容。

function myFunction($qw)
        {
    //set  a var
    var new_content;
        for($i=0;$i<data.length;$i++){
        $dis = data[$i].charAt(0);
        var $n = ($dis.localeCompare($qw))
        if($n == 0)
    //remove replacing the innerHTML here
    //instead, add content to the variable
        new_content+=data[$i] + "<br/>";
        }

    //replace content of div after the loop
    document.getElementById("search_result").innerHTML=new_content;
        $i=0;
        }

Answer 2

在每次更改时触摸DOM都不是一个好习惯。我最好这样做：

function myFunction($qw) {
  var display = [];
  var $dis;
  var $n; 
  for (var $i = 0; $i < data.length; $i++) {
    $dis = data[$i].charAt(0);
    $n = ($dis.localeCompare($qw))
    if ($n == 0)
        display.push(data[$i]);
  }
  $i = 0;
  document.getElementById("search_result").innerHTML = display.join('<br />');
}

或者花哨的方式

function myFunction($qw) {
  var display = data.filter(function (el) {
    var $dis = el.charAt(0);
    var $n = $dis.localeCompare($qw);
    return $n === 0;
  });
  document.getElementById("search_result").innerHTML = display.join('<br />');
}

还使用var语句初始化变量

Answer 3

只是添加@ Sachin的答案，缓存字符串，然后将其完全添加到dom中：

function myFunction($qw) {
    var str = '';
    for ($i = 0; $i < data.length; $i++) {
        $dis = data[$i].charAt(0);
        var $n = ($dis.localeCompare($qw))
        if ($n == 0)
            str += (data[$i] + "<br/>");
    }
    document.getElementById("search_result").innerHTML = str;
    $i = 0; 
}

如何使用innerHTML在javascript中添加内容

3 个答案: