代码之家 › 专栏 › 技术社区 › Penny Liu

将HTML元素显示到特定div

append html jquery javascript

Penny Liu · 技术社区 · 7 年前

我一直试图显示一个元素 div#log . 我正在使用jquery append() 方法在选定图元的末尾插入选项。

然而 drop-down list 不是我所期望的。

$(document).ready(function() {

  // Display DOM to a specific id (div#log)
  $("#log").html("<select class='form-control selcls' id='meterOption'>");
  var meterNum = 1;
  for (var i = 1; i <= 12; i++) {
    $("#log").append("<option value=" + meterNum + ">" + meterNum + "</option>");
    meterNum++;
  }
  $("#log").append("</select>");

});

.selcls {
  padding: 9px;
  border: solid 1px #517B97;
  outline: 0;
  background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF));
  background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

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

代码的一部分如下所示。

  $("#log").html("<select class='form-control selcls' id='meterOption'>");
  var meterNum = 1;
  for (var i = 1; i <= 12; i++) {
    $("#log").append("<option value=" + meterNum + ">" + meterNum + "</option>");
    meterNum++;
  }
  $("#log").append("</select>");

3 回复 | 直到 7 年前

guradio 7 年前

您应该在select中追加该选项,并将select追加到div中。
当前,您正在将该选项附加到div中。

$(document).ready(function() {

  // Display DOM to a specific id (div#log)
  $("#log").html("<select class='form-control selcls' id='meterOption'>");
  var meterNum = 1;
  for (var i = 1; i <= 12; i++) {
    $("#meterOption").append("<option value=" + meterNum + ">" + meterNum + "</option>");
    meterNum++;
  }


});

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

kyun 7 年前

$(document).ready(function() {

  // Display DOM to a specific id (div#log)
  $("#log").html("<select class='form-control selcls' id='meterOption'></select>");
  var meterNum = 1;
  for (var i = 1; i <= 12; i++) {
    $("#log > select").append("<option value=" + meterNum + ">" + meterNum + "</option>");
    meterNum++;
  }
  // $("#log").append("</select>");

});

.selcls {
  padding: 9px;
  border: solid 1px #517B97;
  outline: 0;
  background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF));
  background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

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


</div>

不 $("#log") , $("#log > select") .

如果你想在 select ,您必须找到 选择 标签

但是,你发现 $(“#日志”) ,它不是 选择 标签

所以,你应该写 ${"#log > select")

NeedsAnswers 7 年前

您想要的是:

$("#log").html("<select class='form-control selcls' id='meterOption'>");
#log becomes <select...>
#log.append("x1")
#log becomes <select...>x1
#log.append("x2")
#log becomes <select...>x1x2
#log.append("</select>")
#log becomes <select...>x1x2</select>

您得到的是JQuery的“帮助”,并为您关闭了最初的选择。如果你知道这是真的,那也不是坏事。

$("#log").html("<select class='form-control selcls' id='meterOption'>");
#log becomes <select...></select>
#log.append("x1")
#log becomes <select...></select>x1
#log.append("x2")
#log becomes <select...></select>x1x2
#log.append("</select>")
#log stays <select...></select>x1x2

您将选项添加到div,而不是select。

$("#meterOption").append("<option value=" + meterNum + ">" + meterNum + "</option>");

将项目添加到选择框。

无需添加关闭/选择。