使用 jQuery 创建动态卡片内容答案

【问题标题】：create dynamic card content with jQuery使用 jQuery 创建动态卡片内容
【发布时间】：2019-02-13 15:24:05
【问题描述】：

假设我有多个 div 类，如下所示。我想要做的是，当它被点击时我的函数应该在卡片主体内创建卡片内容（卡片标题，输入组文本）。但是我当前的函数（createCard（））在卡片主体之外创建了一些文本内容。需要你的帮助

 <!-- My ejs file -->

 <div class="col-sm-6">
        <div class="card">
          <div class="card-header">&nbsp;</div>
          <div class="card-body">
            <div style="height: 255px;padding-top:86px;color:#e2e2e2;">
              <i class="icon-plus icons font-2xl" style="font-size: 5rem !important;margin-left: 46%;cursor:pointer;" onclick="createCard()"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

<!-- my js file -->
function createCard() {
    var x = document.createElement("FORM");
    x.setAttribute("id", "myForm");
    document.body.appendChild(x);

    var y = document.createElement("INPUT");
    y.setAttribute("type", "text");
    y.setAttribute("value", "Donald");
    document.getElementById("myForm").appendChild(y);
}

【问题讨论】：

如果我理解正确，您想选择卡片主体并将您创建的元素附加到其中，现在您将它们附加到主体元素
您将其附加到 document.body 而不是将其附加到您各自的卡片 (card-body)

标签： javascript jquery

【解决方案1】：

var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("value", "Donald");
document.getElementsByClassName("card-body")[0].appendChild(y);

假设你只有一个孩子，你可以做这样的事情，而且肯定会出现

另外，通过 jQuery 可以使用各种选项

【讨论】：

【解决方案2】：

您需要将input 和其他必需的内容附加到card-body。您可以通过获取document.getElementsByClassName("card-body")[0] 并在其中附加孩子来做到这一点。

这是一个有效的 sn-p：

function createCard() {
    var x = document.createElement("FORM");
    x.setAttribute("id", "myForm");
    document.body.appendChild(x);
    var y = document.createElement("INPUT");
    y.setAttribute("type", "text");
    y.setAttribute("value", "Donald");
    document.getElementsByClassName("card-body")[0].appendChild(y);
}

<div class="col-sm-6">
        <div class="card">
          <div class="card-header">&nbsp;vcvcv</div>
          <div class="card-body">card-body</br></div>
            <div style="height: 255px;padding-top:86px;color:#e2e2e2;">
              <i class="icon-plus icons font-2xl" style="font-size: 5rem !important;margin-left: 46%;cursor:pointer;" onclick="createCard()">createCard</i>
            
          </div>
        </div>
      </div>

【讨论】：