CODEWITHSUNDEEP
javascriptjqueryhtmldom
George
George

Reputation: 2110

Jquery/Javascript create element

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>

Upvotes: 0

Views: 8281

Answers (9)

Hyangelo
Hyangelo

Reputation: 4812

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>

Upvotes: 1

Tim Down
Tim Down

Reputation: 324717

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;
});

Upvotes: 1

Vismari
Vismari

Reputation: 745

<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>

Upvotes: 1

SteamDev
SteamDev

Reputation: 477

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.

Upvotes: 3

gion_13
gion_13

Reputation: 41533

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();
        });

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 78046

    $('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/

Upvotes: 1

Jose Faeti
Jose Faeti

Reputation: 12314

$('.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.

Upvotes: 1

Andri
Andri

Reputation: 1503

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.

Upvotes: 2

BishopRook
BishopRook

Reputation: 1260

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

Upvotes: 2

Related Questions