Question

假设我有多个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);
}

Answer 1

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

假设您只有一个孩子并且肯定会出现，您可以执行类似的操作

否则，通过jQuery可以使用各种选项

Answer 2

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

以下是有效的代码段：

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>

使用jQuery创建动态卡片内容

2 个答案: