UNwanted addition to insertAfter()

[DK]

I am attempting to wrap a <div> around a variable number of <p> elements by using an insertAfter() after the <h2> title and an insertBefore() before the next <h2> title. Unfortunately,

$('<div id="Info_' + chapterId + '">').insertAfter($chapterTitle);

turns into

<div id="Info_chapter-1"></div>

While I believe that it may be an attempt to insert proper HTML code, I need for the following .insertBefore($chapterTitle) to handle the closing </div>, NOT the .insertAfter().

If there is another way around this, please advise.

THANKS!

[john]

This is desired, and required. It sounds like you want to use .wrap:

  $chapterTitle.wrap('<div id="Info_' + chapterId + '"></div>');

[DK]

Hi John!

Thanks for your reply and suggestion but ...

My problem is that I have a Word-generated document with <h2> (or <h3>) element headers for a variable number of paragraphs (within a #content container). I want to leave the heading visible but .after() a toggle link to hide/show a <div> which would contain the trailing <p> and <ul> as well as trailing (.append()) links to hide and "back to top" THEN close the <div>. I don't believe that I can select only the immediate trailing elements (BOTH <p> and <ul> IN ORDER) up to but NOT including the next <hx> (header element) so, a wrap does not seem to be the solution to MY problem.

I've convince myself that I could .after() the <div> then move (.append()/.prepend()) the adjacent/trailing <p> OR <ul> fields in order (I don't know how to OR the F element in "E ~ F an F element preceded by an E element" to maintain the order: "E ~ (F|G)?) and .append() the toggle links (before the next <h2|h3> element) into the <div>. Since I need to iterate over the full set of <h3> elements THEN the <h2> elements (which enclose the <h3> elements), I am struggling (and fell back to my procedural/linear task education).

Any suggestions would be GREATLY appreciated.