如何在带有 JS 的复选框之后显示文本而不手动修改 HTML？答案

【问题标题】：How to make text show up after a checkbox with JS and without modifying HTML manually?如何在带有 JS 的复选框之后显示文本而不手动修改 HTML？
【发布时间】：2018-07-20 05:19:49
【问题描述】：

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

但它用文本替换了我的复选框。我也无法更改 HTML，因为它是由 3rd 方库为我创建的。对 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 中的方形复选框图标之后添加我选择的文本。

【问题讨论】：

html() 替换所有内容...试试append()
哈哈！嘿，这似乎有效！

标签： javascript jquery html firefox

【解决方案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>

【讨论】：

【解决方案2】：

您需要将 .append() 发送到 html，而不是使用 .html()，因为它会替换 html。

var textnode = document.createTextNode("TEST"); 
$( "input[name='submittal[special_order]']" ).parent().append(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>

【讨论】：

【解决方案3】：

我不确定你到底想做什么，但是这个脚本会转到每个输入 type=checkbox 并带有一个 title 属性，并在它旁边附加 title="" 中的文本

$('input[type="checkbox"][title]').each(
    function(i, input) {
        $(input).after($(input).attr('title'))
    }
)

<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>

【讨论】：