Jquery/Javascript create element

Question

Consider the following DOM manipulation problem: I need to create a span tag after clicking on some link. Because of speeding up the process I prefer using document.createElement()(pure Javascript) instead of the Jquery methods of creating HTML elements. The following code compiles properly but isn't working (maybe because of interferention between Javascript and Jquery). Any help will be greatly appreciated.

<body>
        <a href="#">Create thumbnails</a>
        <script type="text/javascript">
            $('a').click(function(e) {
                var newSpan=null;
                newSpan = document.createElement('span');
                newSpan.setAttribute('class','themes');
                $('.themes').html('themes');
                $('.themes').appendTo('body');
                return false;
            });
        </script>
    </body>

"but isn't working" is not a good description of the issue. What is in fact happening? What isn't? Any errors? — Oded
– Oded, Commented Aug 23, 2011 at 14:24
@George: FYI .setAttribute('class','themes'); may give you trouble in IE6. If you're supporting IE6, you may want to use .setAttribute('className','themes'); instead. — user113716
– user113716, Commented Aug 23, 2011 at 14:47

SteamDev · Accepted Answer · 2011-08-23 14:35:38Z

3

Try the following:

<body>
    <a href="#">Create thumbnails</a>
    <script type="text/javascript">
        $('a').click(function(e) {
            var newSpan=null;
            newSpan = document.createElement('span');
            newSpan.setAttribute('class','themes');
            $(newSpan).html('themes');
            $(newSpan).appendTo('body');
            return false;
        });
    </script>
</body>

Using $(".themes") as a selector will search the document for elements with the class "theme", not the newSpan element in your function. You have to use newSpan as your selector until it is appended to your document.

edited Aug 23, 2011 at 14:35

answered Aug 23, 2011 at 14:27

SteamDev

4774 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tim Down Over a year ago

This won't work in older IE (6, 7, 8 in compatibility mode) because setAttribute() is broken in those browsers. Use newSpan.className = 'themes' instead.

AlexG Over a year ago

Most helpful detail: "until it is appended to your document". Thank you!

BishopRook · Accepted Answer · 2011-08-23 14:25:27Z

2

You need to insert it into your document somewhere before jQuery can do anything with it.

answered Aug 23, 2011 at 14:25

BishopRook

1,2606 silver badges11 bronze badges

Comments

Andri · Accepted Answer · 2011-08-23 14:26:46Z

2

I believe this is because the jQuery "$" function is looking for anything containing class 'themes' that is already in the body of your document. It finds nothing because you only try to append it afterwards.

answered Aug 23, 2011 at 14:26

Andri

1,50313 silver badges21 bronze badges

Comments

Jose Faeti · Accepted Answer · 2011-08-23 14:27:43Z

1

$('.themes').appendTo('body');

With this code you are telling jQuery to find all elements of class 'themes' and append them to body, but in order to find them the elements need to be already present in the DOM, which it seems it's not the case. You should create the element and append it to the DOM via JavaScript, before using jQuery to find them.

answered Aug 23, 2011 at 14:27

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

Comments

SeanCannon · Accepted Answer · 2011-08-23 14:28:18Z

1

    $('a').click(function(e) {
        var newSpan=null;
        newSpan = document.createElement('span');
        newSpan.setAttribute('class','themes');
        $('body').append(newSpan);
        $('.themes').html('themes');
        e.preventDefault();
    });

Demo: http://jsfiddle.net/AlienWebguy/a5VEa/

answered Aug 23, 2011 at 14:28

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Comments

gion_13 · Accepted Answer · 2011-08-23 14:30:22Z

1

The new element is not present in the dom.
Append it to the document, and then see if it works.
+ if you are using jquery, why not use it all the way?

  $('a').click(function(e) {
            $('span')
                .attr('class','themes')
                .html('themes');
                .appendTo('body');
           e.preventDefault();
        });

answered Aug 23, 2011 at 14:30

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

3 Comments

George Over a year ago

I don't use Jquery all the way beacuse I read that document.createElement(span) is faster than $('span')

gion_13 Over a year ago

ok, it can be done your way too, but i don't think that it is a real problem. I imagine that the jquery way is a few miliseconds slower, which is not something that can really affect you. It's like you would want to use the native javascript addEventListener instead of jquery's bind (or click in your case) because it's a bit faster.

SeanCannon Over a year ago

@George, you are right but you are wrong: jsperf.com/jquery-vs-old-skool-dom-creation. $('<span/>') is slower than native JS but it still clocks out at 240,000+ ops/sec. Code maintainability and scalability is much more important than this insignificant performance tweak. Why not just code with procedural everything? It's faster than OOP.

Vismari · Accepted Answer · 2011-08-23 14:38:47Z

1

<body>
<a href="#">Create thumbnails</a>
<script type="text/javascript">
$('a').click(function(e) {
var newSpan=null;
newSpan = document.createElement('span');
newSpan.setAttribute('class','themes');

//You can't manipulate span.theme because span does still not exist 
//$('.themes').html('themes');
//$('.themes').appendTo('body');

//Create span on the body and then you can manipulate it
document.body.appendChild(newSpan);
$('.themes').html('themes');
return false;
});
</script>
</body>

Or:

<body>
<a href="#">Create thumbnails</a>
<script type="text/javascript">
$('a').click(function(e) {
$(this).after('<span class="themes">thumb</span>');
});
</script>
</body>

answered Aug 23, 2011 at 14:38

Vismari

7453 silver badges12 bronze badges

Comments

Tim Down · Accepted Answer · 2011-08-23 14:42:42Z

1

A couple of problems with your code:

The jQuery selector can't find elements that are not already in the document
getAttribute() and setAttribute() are broken in older IE. Use the className property instead.

However, the performance gain you get from avoiding using jQuery in this instance is going to be minuscule, unless you're doing a lot more in your click handler than you posted. However, for what it's worth, here's some revised code:

$('a').click(function(e) {
    var newSpan = document.createElement('span');
    newSpan.className = 'themes';
    newSpan.innerHTML = 'themes';
    document.body.appendChild(newSpan);
    return false;
});

answered Aug 23, 2011 at 14:42

Tim Down

326k76 gold badges461 silver badges546 bronze badges

Comments

Hyangelo · Accepted Answer · 2011-08-23 14:46:57Z

1

Wrap the span you've just created as a jQuery object so you can perform jquery operations on it even without appending it to the body yet.

  <body>
            <a href="#">Create thumbnails</a>
            <script type="text/javascript">
                $('a').click(function(e) {
                    var newSpan=null;
                    newSpan = document.createElement('span');
                    newSpan.setAttribute('class','themes');
                    var jqNewSpan = $(newSpan);
                    jqNewSpan.html('themes');
                    jqNewSpan.appendTo('body');
                    return false;
                });
            </script>
        </body>

answered Aug 23, 2011 at 14:46

Hyangelo

4,8224 gold badges28 silver badges34 bronze badges

Collectives™ on Stack Overflow

Jquery/Javascript create element

9 Answers 9

2 Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related