Slash added to appended html elements in collection

I'm using @Premasagar's nitelite jquery plugin https://github.com/premasagar/nitelite to create a lightbox for my site. I am calling with the function below. It's all good except that jquery's adding slashes to the end of my single <p> tags - so they become <p class="close"/>Content<p/> instead of <p class="close">Content</p> I assume this is to make valid xhtml when people add tags like <img> or <input> - so what is the correct syntax here?

    var lb = $.nitelite();
    lb.open(
        $('<div></div>', {
            html: 'hello world',
        })
        .append('<p class="close">')
        .append(
            $('<a></a>', {
                click: function() {
                    lb.close();
                    return false;
                },
              开发者_开发知识库  href: '#',
                html: 'Close'
            })
        )
        .append('</p>')
    );

I'm no jQuery expert, but from jQuery API doc:

The .append() method inserts the specified content as the last child of each element in the jQuery collection

I'd think, that this means, that

.append('<p>')

inserts an empty paragraph. To add your content inside your paragraph, you should be using the same method as with you div's and anchors.

.append($('<p></p>', {html: content}))

Can't you use the same method for <p> as for <div>? Like:

lb.open(
$('<div></div>', {
    html: 'hello world',
})
.append(
    $('<class="close"></p>', {
        html: $('<a></a>', {
                 click: function() {
                 lb.close();
                 return false;
              },
              href: '#',
              html: 'Close'
             })
     })
);

JavaScript does not handle the page HTML as a string. Instead, it works with the tree representation of the page. That means that you cannot insert a start tag and later an end one: you have to insert a full node. So replace stuff like this:

.append('<p>')

... with this:

.append('<p></p>')

Since I think the plug-in does NOT support what you want to achieve, you may do it in the following way.

var lb = $.nitelite();
    lb.open(
        $('<div/>', {
            html: 'hello world',css: {
                            background: '#FFF',
                            padding: '10px',
                            width: 600,
                            border: '3px solid #CCC',
                            MozBorderRadius: '7px',
                            WebkitBorderRadius: '7px',
                            position: 'relative'
                        }
        })
        .append(
            $('<a></a>', {
                click: function() {
                    lb.close();
                    return false;
                },
                href: '#',
                html: 'Close'
            })
        )

    );
    $('.nitelite-lightbox-container').find('a').wrap('<p class="close"></p>');

Looks like you accepted an answer but I typed this so I hope it helps you debug in the future.

I'm using chrome and I don't see the behavior you describe. Check it out for yourself and test your solution against it. When your result is displayed you can inspect elements against it.

http://jsfiddle.net/pborreli/pJgyu/

<div>
  hello world
  <p class="close"></p>
  <a href="#">Close</a>
  <p></p>
</div>