CODEWITHSUNDEEP
jqueryjquery-selectors
Chief Alchemist
Chief Alchemist

Reputation: 654

How do I add an HTML tag without having to commit to the closing tag at the same time?

I've looked at before(), append() and wrap(). None are quite what I need.

A pseudo-explanation of what I'm trying to do:

I'm processing a "list" of <div>s as selected by their class. If the .text() changes from one "row" to the next I want to insert (for example) <div class="wrapper">, when the .text() changes again I want to close the previous wrapper and then start a new one (</div><div class="wrapper">) and so on.

In the end, like "rows" (as based on .text()) would be wrapped together within a given <div class="wrapper">.

When I try to use any of the methods I've mentioned they each in some way force the closing tag. I want to add the div and then the closing tag myself. Seems like a pretty simple need but I can't seem to find a viable solution.

Upvotes: 1

Views: 598

Answers (4)

Brad Christie
Brad Christie

Reputation: 101614

Simple answer is that you can't insert broken tags when you're working with the DOM. However, you can change your mentality. Instead of trying to add <div>, then adding </div><div> every so many elements, switch it up:

var $d = $('<div>').appendTo('#container');
$d.append(/*match*/);
$d.append(/*match*/);
$d.append(/*match*/);
$d = $('<div>').appendTo('#container');
$d.append(/*match*/);
$d.append(/*match*/);
$d.append(/*match*/);

and so-on. Basically, change your thinking process to move the elements in to the <div>, instead of wrapping the elements with <div> markup.

You can also keep a running tally, then reset your list on text changes (as you've described). e.g.

var matches = [],
    $d = $('div');
$d.each(function(){
    var $t = $(this);
    if(matches.length > 0 && $(matches[0]).text() != $t.text()){
        $('<div>',{'class':'wrapper'}).append(matches)
            .appendTo('body');
        matches = [];
    }
    matches.push(this);
});
if(matches.length > 0){
    $('<div>',{'class':'wrapper'}).append(matches)
        .appendTo('body');
}

Example of the above

Upvotes: 3

JayDM
JayDM

Reputation: 1186

I am pretty sure that when you programatically add an element to the DOM - the element is fully created (both opened and closed).

If you want to be able to create a list and add the entries to it - use appendChild().

That will allow you to add the entries within the list.

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50797

http://jsfiddle.net/XH2hp/

//can't form the tag normally, must use html entities.
$('div').append('&lt;p&gt;');//this is a non-closing <p> tag
$('div').append("Hey, I'm some text between two P tags. How does that work?!");
$('div').append('&lt;/p&gt;');//this is the closing </p> tag

//In order for the the DOM to get updated with the proper markup, we must process the HTML entities, .text() will do that for us.
$('div').html($('div').text());

Upvotes: -4

Brad
Brad

Reputation: 163313

You can't.

Even if you don't close the tag, somehow injecting bad HTML, the browser will attempt to close it for you. Simply add more to the contents of the tag when needed.

Upvotes: 5

Related Questions