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>
9 Answers 9
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.
You need to insert it into your document somewhere before jQuery can do anything with it.
Comments
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.
Comments
$('.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.
Comments
$('a').click(function(e) {
var newSpan=null;
newSpan = document.createElement('span');
newSpan.setAttribute('class','themes');
$('body').append(newSpan);
$('.themes').html('themes');
e.preventDefault();
});
Comments
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();
});
3 Comments
addEventListener instead of jquery's bind (or click in your case) because it's a bit faster.$('<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.<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>
Comments
A couple of problems with your code:
- The jQuery selector can't find elements that are not already in the document
getAttribute()andsetAttribute()are broken in older IE. Use theclassNameproperty 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;
});
Comments
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>
.setAttribute('class','themes');may give you trouble inIE6. If you're supportingIE6, you may want to use.setAttribute('className','themes');instead.