Question

我对javaScript很新，我需要帮助。我正在尝试创建一个由两个元素组成的div，之后我想将它附加到特定的类上。这是我到目前为止所得到的：

<body> <div class="myClass"></div> </body>

为简单起见，我只包含了我认为重要的代码。

  <script>
  var div1 = document.createElement("div");
  div1.className = "note";
  var btn1= document.createElement("button");
  btn1.className = "btn";
  var impt1= document.createElement("input");
  impt1.className = "impt";
  div1.append(impt1);
  $("#myClass").append(div1);
  </script>

上面代码的问题是，它不是只给我一个包含按钮和输入的单个div，它给了我一个按钮和一些不需要的框而没有输入字段。任何人都可以帮助我如何获得正确的输出。所需的解决方案是创建一个div，其中包含使用javaScript附加到myClass的按钮和输入字段。谢谢。

Answer 1

var div1 = document.createElement("div");
  div1.className = "note";
  var btn1= document.createElement("button");
  btn1.className = "btn";
  btn1.innerHTML = "btn";
  var impt1= document.createElement("input");
  impt1.className = "impt";
  div1.append(btn1);
  div1.append(impt1);
  $(".myClass").append(div1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
 <div class="myClass"></div>
 </body>

Answer 2

你走在正确的道路上，你注意到jQuery的引用，因此$(".myClass").append(div1);无效。这可以使用。

来实现

document.querySelector('.myClass').append(div1);

var div1 = document.createElement("div");
div1.className = "note";

var btn1 = document.createElement("button");
btn1.className = "btn";
btn1.textContent = "btn";

var impt1 = document.createElement("input");
impt1.className = "impt";

div1.append(btn1);
div1.append(impt1);

document.querySelector('.myClass').append(div1);

<div class="myClass"></div>

如果您使用的是jQuery。

var div1 = $("<div>", {
  "class": "note"
});
var btn1 = $("<button>", {
  "class": "btn",
  "text": "btn"
});

var impt1 = $("<input>", {
  "class": "impt"
});

div1.append(btn1);
div1.append(impt1);

$('.myClass').append(div1);

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

如何在javaScript中创建包含两个元素的div？

2 个答案: