javascript - 如何用JS让文本显示在复选框后而不需要手动修改HTML？

Question

我遇到了麻烦...如何创建一个新节点并将其插入标题为“特殊订单”的复选框之后？

但它用文本替换了我的复选框。另外，我无法更改 HTML，因为它是由第三方库为我创建的。对 HTML 的任何更改都将通过 JS/jQuery 完成。

此外，由于某种原因，我的特定 HTML 并不总是显示应该显示的文本。我可以使用 Firefox 开发者工具编辑文本，但它在复选框后不显示，这很奇怪......我可能做错了什么。

我尝试过这样做

var textnode = document.createTextNode("TEST"); 
$( "input[name='submittal[special_order]']" ).parent().html(textnode);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="submittal_form_info">


  <label><span>XXX:</span>
  <input name="submittal[xxx]" value="0" type="hidden">
  <input name="submittal[xxx]" value="1" type="checkbox">
  </label>


  <label><span>Special Order:</span>
  <input name="submittal[special_order]" value="0" type="hidden">
  <input name="submittal[special_order]" title="Is this a special order?" value="1" type="checkbox">
  </label>

</fieldset>

我想要做的是在 HTML 中的方形复选框图标后添加我选择的文本。

Answer 1

可以定位 :last 输入并使用 after()

var textnode = document.createTextNode("TEST"); 
$( "input[name='submittal[special_order]']:last" ).after(textnode);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="submittal_form_info">


  <label><span>XXX:</span>
  <input name="submittal[xxx]" value="0" type="hidden">
  <input name="submittal[xxx]" value="1" type="checkbox">
  </label>


  <label><span>Special Order:</span>
  <input name="submittal[special_order]" value="0" type="hidden">
  <input name="submittal[special_order]" title="Is this a special order?" value="1" type="checkbox">
  </label>

</fieldset>