How to append a closing and opening tag inbetween 2 elements with jquery

Question

I have a dynamic table that is being generated that I cannot alter. The table has a checkbox and a label next to it. They are both within the same and need to be in their own within the same . I have tried several solutions but they have not worked. Any help would be greatly appreciated.

<tr>
    <td>
        <input type="checkbox" value="1" name="check1" id="someID">   
        <label for="question">label</label>
    </td>
<tr>
<tr>
    <td>
        <input type="checkbox" value="1" name="check2" id="someID2">   
        <label for="question">label</label>
    </td>
<tr>

I need to it look like this:

<tr>
    <td>
        <input type="checkbox" value="1" name="check1" id="someID"> 
    </td>
    <td>  
        <label for="question">label</label>
    </td>
<tr>
<tr>
    <td>
        <input type="checkbox" value="1" name="check2" id="someID2">  
    </td>
    <td>   
        <label for="question">label</label>
    </td>
<tr>

Here is the jquery that I have been trying:

$("</td>").insertAfter(".form-group td input");

possible duplicate of [How to move an element into another element?](http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element) — Marc B, Apr 15 '15 at 21:59
Is your dynamic table outputting faulty html? the is ended with a , can you verify if this is just a typo? — Mo Alsaedi, Apr 15 '15 at 22:00
@Mohammed: no, each cell is correctly closed; though there is an extra `` following each cell. — David Thomas, Apr 15 '15 at 22:05

score 2 · Accepted Answer · answered Apr 15 '15 at 22:13

One approach:

// select the <label> that immediately follows an <input>
// within a <td> element, iterate over the returned collection:
$('td input + label').each(function() {
  // move the <label> after its parent <td> element,
  // wrap the <label> with a <td>:
  $(this).insertAfter(this.parentNode).wrap('<td></td>');
});

$('td input + label').each(function() {
  $(this).insertAfter(this.parentNode).wrap('<td></td>');
});

td {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" value="1" name="check1" id="someID">
        <label for="question">label</label>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="1" name="check2" id="someID2">
        <label for="question">label</label>
      </td>
    </tr>
  </tbody>
</table>

References:

JavaScript:
- Node.parentNode.
jQuery:
- insertAfter().
- wrap().

MJ Vakili · Answer 2 · 2015-04-16T10:20:16.330

1

try this:

$('table tr').find('label,input').unwrap().wrap( "<td />" );

edited Apr 16 '15 at 10:20

answered Apr 15 '15 at 22:12

MJ Vakili

2,798
1
19
25

score 0 · Answer 3 · answered Apr 15 '15 at 22:21

Using jQuery:

$('label').each(function(){   
    $(this).parent().after('<td/>').next().append($(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
    <td>
        <input type="checkbox" value="1" name="check1" id="someID">   
        <label for="question">label</label>
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" value="1" name="check2" id="someID2">   
        <label for="question">label</label>
    </td>
</tr>
</table>

score 0 · Answer 4 · answered Apr 15 '15 at 23:19

jQuery is not the best way to do it. It is going to get messy pretty fast. I would recommend using a template engine. MustacheJS is really easy to learn as long as you know some HTML. I built a working example.

http://jsfiddle.net/christianjuth/t0s6x617/

Data:

var data = {
  table: [
    // table row
    [
      '<input>',
      '<label>Input</label>'
    ],
    // table row
    [
      '<input>',
      '<label>Input</label>'
    ]
  ]
}

Template:

<table>
  {{#table}}
    <tr>
    {{#.}}
        <td>
            {{{.}}}
        </td>
    {{/.}}
    </tr>
  {{/table}}
 </table>

Javascript:

var html = Mustache.render($('#table').html(), data);
$('body').append(html);

Output:

<table>
  <tbody>
    <tr>
      <td>
        <input>
      </td>
      <td>
        <label>Input</label>
      </td>
    </tr>
    <tr>
      <td>
        <input>
      </td>
      <td>
        <label>Input</label>
      </td>
    </tr>
  </tbody>
</table>

score -1 · Answer 5 · answered Apr 15 '15 at 22:04

-1

You cannot use jQuery to insert just html end tag.

You'd have to add extra <td /> to each row and move the label or input into it.

You can do something like this:

$("#yourtableid tr").each(function (index, element) {
var newCell = $("<td />");
var label = $(element).find("label").detach();
newCell.append(label);
$(element).append(newCell);
});

answered Apr 15 '15 at 22:04

Martin Vich

1,062
1
7
22

_You cannot use jQuery to insert just html end tag._ ... nope – Apr 15 '15 at 22:31

How to append a closing and opening tag inbetween 2 elements with jquery

5 Answers5