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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (131)

如何在标题为“Special Order”的复选框之后创建一个新节点并将其插入?

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

提问于
用户回答回答于

我不确定你想要做什么,但是这个脚本将转到每个输入带有title属性的type=checkbox,并将文本附加到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>

用户回答回答于

你需要在html使用.append(),而不是使用.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>

所属标签

可能回答问题的人

  • 天使的炫翼

    16 粉丝531 提问35 回答
  • 富有想象力的人

    2 粉丝0 提问26 回答
  • 旺仔小小鹿

    社区 · 运营 (已认证)

    48 粉丝0 提问26 回答
  • 发条丶魔灵1

    6 粉丝525 提问25 回答

扫码关注云+社区

领取腾讯云代金券