How do I get the HTML content between two IDs?

Question

This is my js code:

    $("tr[id^=list2ghead_]").each(function(){
                    j = i+1;
                    id_name = $(this).attr("id");
                    id_name_lenght = id_name.length;
                    if (i >= 10){
                        id_name = id_name.substr(0, id_name_lenght-2);
                    }else{
                        id_name = id_name.substr(0, id_name_lenght-1);
                    }
                    html = $("#"+id_name+i).nextUntil("#"+id_name+j).outerHTML;
                    $("#"+id_name+i).nextUntil("#"+id_name+j).remove();
                    html = "<div class='content'>"+html+"</div>";
                    $(html).insertAfter("#"+id_name+i);
                    i++;
 });

I want to get the HTML content between two IDs. After that I want to add to this HTML to a div with a class "content", remove the exiting HTML, and insert after an ID the HTML the new div. Now outerHtml returns undefined. What should I do ?

This is htnml code generated by jQgrid plugin: enter image description here

the html code is generated by a jQuery plugin,but I can post a picture of it — Attila Naghi, Aug 07 '14 at 12:47
all of the html code is generated by the plugin with js , so it does not appear in the source code — Attila Naghi, Aug 07 '14 at 12:51
Are the two ids on the same dom level or several different levels? — Pablo Jomer, Aug 07 '14 at 12:52
@PabloKarlsson look it picture, it is on the same level, thats the problem :) — Attila Naghi, Aug 07 '14 at 12:52

LeGEC · Answer 1 · 2014-08-07T14:14:39.040

0

.outerHTML is not a property of a jQuery selection.

Here is a way to move a selection from one place to another :

var $div = $('<div class="content"></div>');
var $selection = $("#"+id_name+i).nextUntil("#"+id_name+j);
$div.append($selection).insertAfter("#"+id_name+i);

edited Aug 07 '14 at 14:14

answered Aug 07 '14 at 12:55

LeGEC

46,477
5
57
104

it got this : HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy – Attila Naghi Aug 07 '14 at 13:16

Yann · Answer 2 · 2014-08-07T13:04:05.380

0

You could use jQuery and Javascript outerHTML property. If both nodes are at the same level:

var theHtml = "";
var id1 = "beginId";
var id2 = "endId";
var $node = $("#" + id1);
var nodes = new Array();
while($node.attr("id") != id2)
{
    nodes.push($node);
    theHtml += $node.get(0).outerHTML;
    $node = $node.next();
}
nodes.push($node); // Edit: also add the second node to the list
theHtml += $node.get(0).outerHTML; // Get the HTML of node with id2

$.each(nodes, function() {
    $(this).remove();
});

$(".content").attr("id","theHtml").html(theHtml);

This will include the html of both nodes with id1 and id2.

edited Aug 07 '14 at 13:04

answered Aug 07 '14 at 12:56

Yann

113
7

I got this error: TypeError: $node.get(...) is undefined – Attila Naghi Aug 07 '14 at 13:18
It means that $("#" + id1) did not find anything because the id might be wrong (or the element does not exists yet), or that $node.next() did not find anything, in which case the while loop did not end before reaching the last sibbling because id2 is wrong or because the element with id2 is not on the same level as id1. – Yann Aug 07 '14 at 13:34
Are you developping in Wordpress or using some other kind of libraries ? If so, try using `var $node = jQuery("#" + id1);` instead, if it works, my previous comment does not apply. – Yann Aug 07 '14 at 13:41

Ram · Answer 3 · 2014-08-07T13:36:00.307

0

jQuery object doesn't have outerHTML property. For getting the property you can use the prop method. $collection.prop('outerHTML'). Note that prop as getter returns value of the first matched element, so you should iterate through the collection and read the properties individually.

var outerHTML = $("#"+id_name+i).nextUntil("#"+id_name+j).map(function() {
    return this.outerHTML;
}).get().join('');

Note that div element can't have tr children!

You could also get the next element using indexes and eq method:

var $col = $("tr[id^=list2ghead_]");

$col.each(function(i) {
   var $next = $col.eq(i + 1);
   var $between = $(this).nextUntil($next); //.filter('.jqrow');
   var outerHTML = $between.map(function() {
        return this.outerHTML;
  }).get().join(''); 

  console.log(outerHTML);    
});

edited Aug 07 '14 at 13:36

answered Aug 07 '14 at 12:58

Ram

143,282
16
168
197

I got this : ReferenceError: id_name is not defined – Attila Naghi Aug 07 '14 at 13:20
is there a function in Jquery similar to outerHTML ? – Attila Naghi Aug 07 '14 at 13:20
@Chester I don't know how you have implemented the first snippet in your code. You define it here `id_name = $(this).attr("id");`, don't you? No, jQuery doesn't have such method. `outerHTML` is a property. as I have stated `prop` can read the property for you. What's wrong with using the `map` method? If the logic couldn't return the expected collection, you can try the second snippet using the `eq` and probably `filter` methods. – Ram Aug 07 '14 at 13:25
ok, my fault i did not put into my each function your code:) , but where i should include this part:
, because i want to put the content of the two ids into a div with the class content ? btw: thx for helping me – Attila Naghi Aug 07 '14 at 13:52
@Chester You are welcome. "Note that `div` element can't have `tr` children!" You can get the `td` children's content and then set the `innerHTML` of `div` elements. Is this what you are after? – Ram Aug 07 '14 at 13:54
hmmm thats should be problem, so what does it should have tr children? – Attila Naghi Aug 07 '14 at 13:57
@Chester Sorry, I didn't understand your last comment. – Ram Aug 07 '14 at 14:03
is there an html tag, which can have tr children ? – Attila Naghi Aug 07 '14 at 14:05
@Chester Yes, `table` element can have! – Ram Aug 07 '14 at 14:05

How do I get the HTML content between two IDs?

3 Answers3