Question

I have four links and I would like content to appear in a div(.contentcont [name of div]) below the list of links for that particular link that was clicked.

$('.link1').click(function(e){
$(this).clone().html('<h1>Text appear</h1>')
.appendTo('.contentcont')
               e.preventDefault();  
       });

I am using .html() to provide the content to be entered into the div. If you take a look at the js fiddle provided( http://jsfiddle.net/jack2ky/K3FaY/2/) you will be able to see that the new content is appearing in the div but it’s taking on the characteristic of the link [no good]. Maybe it has to do with me using .clone(). The reason why I am using .clone() is because when ever I clicked on the link the link would disappear. maybe you can tell me if using .clone() was the right solution to use to prevent the link from disappearing. And why the new content is taking on the link characteristic?

Answer 1

.html() sets the inner HTML of your element. Your cloned element is still a <a> tag (you cloned your link), so you’re essentially appending a copy of your link with different text into the other element.

If I’m reading your code correctly, you really don’t need to use .clone() or .html() at all. Just create a new element:

$('<h1 />', {
    text: 'Text appear'
}).appendTo('.contentcont');

Demo: http://jsfiddle.net/Blender/K3FaY/8/