CODEWITHSUNDEEP
javascriptjqueryhtmlfirefox
Dennis
Dennis

Reputation: 8101

How to make text show up after a checkbox with JS and without modifying HTML manually?

I am having trouble ... How do I create a new node and insert it AFTER the checkbox that is titled "Special Order"?

But it replaces my checkbox with the text. Also I cannot change HTML as it is created for me by a 3rd party library. Any changes to HTML are to be done via i.e. JS/jQuery.

Also, for some reason my particular HTML is not always showing the text, when it should be. I can edit text with Firefox Developer Tools but it doesn't show after the checkbox which is weird... I am probably doing something wrong.

I tried doing

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>

What I am trying to do is to add text of my choosing after the square checkbox icon in my HTML.

Upvotes: 0

Views: 47

Answers (3)

oudmane
oudmane

Reputation: 107

I'm not sure what you wanna do exactly, but this script will go to each input type=checkbox with a title attribute, and append the text in title="" next to it

$('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>

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

Can target the :last input and use 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>

Upvotes: 1

Jimenemex
Jimenemex

Reputation: 3166

You need to .append() it to the html instead of using .html() as that replaces the 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>

Upvotes: 1

Related Questions