Skip to content
This repository

Self-closing html tags act as open tags #487

Closed
wants to merge 1 commit into from

4 participants

Sean Massa Thomas Fuchs Geoff Massanek Todd Larsen
Sean Massa

When creating DOM elements with an html string, self-closing html tags are interpreted by the browser and opening tags only. This happens when you set innerHTML on an element.

Happens Now:

$('<div /><div />')
<div>
  <div></div>
</div>

Expect to Happen:

$('<div /><div />')
<div></div>
<div></div>

To fix this, jQuery will split any self-closing tags into open-close tags before creating the elements. This pull request implements that technique in Zepto. I also added a test for this scenario.

jQuery Implementation Reference: https://github.com/jquery/jquery/blob/master/src/manipulation.js#L674

Side Effect: I added uglifier to the Gemfile since it's required to build the project. If you don't want to accept that part of this pull request, I can remove it.

Thomas Fuchs
Owner

It's a short fix, but should we promote this? In HTML5, there actually aren't any self-closing tags anymore, and writing stuff like <div /> directly in the HTML delivered to the browser, or used in .html() will behave differently.

I can see the appeal for conciseness tho, plus it doesn't add a lot of code.

Sean Massa

I can see your point. But yes, I'm very interested in the conciseness this allows.

Geoff Massanek

I am torn. It is a super helpful shortcut that I would like to use, but I can see that it would be a subtle, hard to debug error if users were expecting zepto to translate directly as HTML5 would.

I'd say the conciseness is worth it, but I see both sides.

Todd Larsen

IMO, while the elements actually inserted into the DOM wouldn't be self-closing, I would still expect the self-closing shorthand syntax to be usable in zepto's API.

Thomas Fuchs
Owner

Fixed in 1c3325d

Thomas Fuchs madrobby closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
1  Gemfile
... ... @@ -1,3 +1,4 @@
1 1 source :rubygems
2 2
3 3 gem 'rake'
  4 +gem 'uglifier'
7 Gemfile.lock
... ... @@ -1,10 +1,17 @@
1 1 GEM
2 2 remote: http://rubygems.org/
3 3 specs:
  4 + execjs (1.3.0)
  5 + multi_json (~> 1.0)
  6 + multi_json (1.3.2)
4 7 rake (0.9.2.2)
  8 + uglifier (1.2.4)
  9 + execjs (>= 0.3.0)
  10 + multi_json (>= 1.0.2)
5 11
6 12 PLATFORMS
7 13 ruby
8 14
9 15 DEPENDENCIES
10 16 rake
  17 + uglifier
6 src/zepto.js
@@ -101,6 +101,12 @@ var Zepto = (function() {
101 101 if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
102 102 if (!(name in containers)) name = '*'
103 103 var container = containers[name]
  104 +
  105 + if(html.replace) {
  106 + var tagExpander = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig
  107 + html = html.replace(tagExpander, "<$1></$2>")
  108 + }
  109 +
104 110 container.innerHTML = '' + html
105 111 return $.each(slice.call(container.childNodes), function(){
106 112 container.removeChild(this)
3  test/zepto.html
@@ -525,6 +525,9 @@
525 525 t.assertEqual("<span>world</span>", outerHTML(fragment.get(2)))
526 526 t.assertEqual('', fragment.selector)
527 527
  528 + fragment = $("<div /><div />")
  529 + t.assertLength(2, fragment)
  530 +
528 531 fragment = $("<div>hello</div> ")
529 532 t.assertLength(1, fragment)
530 533 },

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.