时间戳

首页 > 解决方案 > 如何在带有 JS 的复选框之后显示文本而不手动修改 HTML？

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

问题描述

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

但它用文本替换了我的复选框。我也无法更改 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 中的方形复选框图标之后添加我选择的文本。

标签： javascriptjqueryhtmlfirefox

解决方案

您需要将.append()其添加到 html，而不是使用.html()as 替换 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>

推荐阅读