Question

我正在使用Twitter的Bootstraps卡，并且希望能够在单击时添加卡，但是我希望它们可以添加到被单击对象的左侧，因此它们以行方式添加。当前，它们被添加到adder元素的顶部。

这就是我渴望在 JavaScript 中添加元素的功能的方法：

function listAdder() {
  var header = document.getElementById("adder");
  header.insertAdjacentHTML("beforebegin", '<div class="card"><div class="card-body"><h5 class="card-title"><textarea type="text" placeholder="List title" id="list-title"></textarea></h5><p class="card-text"><textarea type="text" placeholder="List description" id="list-descrip"></textarea></p></div></div>')
};

document.getElementById("adder").addEventListener("click", listAdder)

HTML ：

<div id="title">
  <p>Lists</p>
</div>
<div class="card-columns">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title"><textarea type="text" placeholder="List title" id="list-title"></textarea></h5>
      <p class="card-text"><textarea type="text" placeholder="List description" id="list-descrip"></textarea></p>
    </div>
  </div>
  <div class="card">
    <div id="adder">+</div>
  </div>
</div>

这是卡片样式的方式，它们被放置在卡片列中，这样，如果连续三张以上卡片将被添加到 CSS 中的下一行：

.card {
  background-color: rgb(163, 163, 163, 0.6);
  border-color: transparent;
}

.card-columns {
  padding-left: 1.5%;
  padding-right: 1.5%;
  padding-top: 0;
}

.card-title {
  font-size: 1.5em;
  color: white;
  font-weight: unset;
  font-family: 'Lato', sans-serif;
  margin-bottom: 0;
  margin-top: 0;
}

.card-text {
  font-size: 1.10em;
}

.card-title textarea {
  background-color: transparent;
  outline: none;
  font-family: 'Lato', sans-serif;
  color: white;
  text-align: center;
  width: 100%;
  height: 1.5em;
  padding-bottom: 0;
  margin-bottom: 0;
  resize: none;
}

.card-text textarea {
  background-color: transparent;
  outline: none;
  font-family: 'Lato', sans-serif;
  color: white;
  padding-left: 0;
  width: 100%;
  height: 6em;
  padding-bottom: 0;
  margin-bottom: 0;
  resize: none;
}

.card-body {
  color: white;
  font-family: 'Lato', sans-serif;
}

#adder {
  text-align: center;
  color: white;
  font-size: 7em;
  cursor: pointer;
}

insertAdjacentHTML并排插入元素

0 个答案: