Javascript 条带：此元素将被装载到包含子节点的DOM元素

我正在运行stripe v3，它在web控制台中向我发出此警告

This Element will be mounted to a DOM element that contains child nodes.

为什么元素包含“子节点”很重要

如何最好地解决此问题，以消除警告并解决问题

我的条带代码当前与条带元素设置中推荐的代码相同

参考：

//创建条带客户端
var stripe=stripe（'pk_test_bJA9VLD3BN4LYxPWPfJ5vcjk'）；
//创建元素的实例
var elements=stripe.elements（）；
//创建元素时，可以将自定义样式传递给选项。
//（请注意，此演示使用的样式集比下面的指南更广泛。）
变量样式={
基数：{
颜色：“#32325d”，
线宽：“18px”，
fontFamily:“新赫尔维蒂卡”，赫尔维蒂卡，无衬线，
fontSmoothing:'抗锯齿'，
fontSize:'16px'，
“：：占位符”：{
颜色：“#aab7c4”
}
},
无效：{
颜色：“#fa755a”，
iconColor:“#fa755a”
}
};
//创建卡元素的实例
var card=elements.create（'card'，{style:style}）；
//将card元素的实例添加到“card元素”中
卡。挂载（“#卡元素”）；
//处理来自卡元素的实时验证错误。
card.addEventListener（'change'，函数（事件）{
var displayError=document.getElementById（'card-errors'）；
if（event.error）{
displayError.textContent=event.error.message；
}否则{
displayError.textContent=''；
}
});
//处理表格提交
var form=document.getElementById（'payment-form'）；
表单.addEventListener（'submit'，函数（事件）{
event.preventDefault（）；
stripe.createToken（卡片）.then（函数（结果）{
if（result.error）{
//如果出现错误，请通知用户
var errorElement=document.getElementById（'card-errors'）；
errorElement.textContent=result.error.message；
}否则{
//将令牌发送到服务器
stripeTokenHandler（result.token）；
}
});
});

这是一个问题，因为子节点将替换为元素

确保正在装载元素的DOM节点没有任何子节点。 例如，在您的示例中，确保

card元素

div没有任何子节点

---

您提到您正在使用推荐的设置代码。给出的代码在card元素中有注释：

<div id="card-element">
  <!-- a Stripe Element will be inserted here. -->
</div>

---

删除它，享受一个无错误的控制台。

您的前端代码可能在stripe元素中嵌套了一些东西。这是不允许的，因为stripe将在

#card元素

中嵌套它自己的DOM元素。

#卡元素

必须保持为空

例如： 你写这个

<div class="form-row">
  <div class="col-md-6">
    <label for="card-element">Elements</label>
    <div id="card-element" class="form-control"></div>
  </div>
</div>

元素

但是，这一点是：

<div class="form-row">
  <div class="col-md-6">
    <label for="card-element">Elements</label>
    <div id="card-element" class="form-control">
      <div class="__PrivateStripeElement"></div>
    </div>
  </div>
</div>

元素

---

当加载到页面上时，stripe会将自己的

div

添加到

#card元素

，该元素包含一个

iframe

，其中包含许多行附加代码。

为时已晚，但可能会帮助其他人

你不需要写信

<input type="text" id="card_number">

可以用div替换输入行

 <div id="card_number" class="form-control"></div>

考虑到条带文档上的iframe中没有出现错误，我认为这条注释不是问题所在。有趣的发现。在我当前的项目中，删除注释消除了错误。我无法证实原因，只是它确实如此。希望它能为其他痴迷的程序员工作。而且，感谢您的编辑，我应该添加代码进行澄清。

 <div id="card_number" class="form-control"></div>