dom-manipulation

I think I have a very simple question, but I couldn't find a solution. So what I want is to load a DIV content via HTML. The problem is that it is not just a text, but also an image. The ajax call returns the HTML code, but this is displayed in the DIV as HTML and is not executed. Difficult to explain, but obvious from the example... The AJAX call returns the string: <img src="/images/weather/1.png" width="80px"><br>3.3 °C The problem is obvious. Instead of an image and the 3.3°C in the div, I get the actual code, so instead of the image I see img src=.... I know that i need to somehow decode

I have several items in a list and want to highlight the one a user clicks on by applying some css style, maybe a background color etc. My HTML looks like this: <ul class="thumbnails"> <li> <a href="#" class="thumbnail"> <img class="giftthumb" src='thumb1.jpg' alt=""> <span class="gifttitle">Thumb1</span> </a> </li> <li> <a href="#" class="thumbnail"> <img class="giftthumb" src='thumb2.jpg' alt=""> <span class="gifttitle">Thumb3</span> </a> </li> <li> <a href="#" class="thumbnail"> <img class="giftthumb" src='thumb3.jpg' alt=""> <span class="gifttitle">Thumb3</span> </a> </li> </ul> jQUery to

Many People have told me that it is a very bad thing to manipulate DOM in controllers, but what exactly is the reason. How does it affect the application that you are making? What are the Best Practices to do that and how is it done? Technically controller should be smaller & compact, it should not be playing with a DOM. Controller will only interested to have a business logic & binding level logic that are being called on events. As per my perspective the reason behind " You should not manipulate DOM from the controller " is, It's just because of separation of concern. If you do the DOM

I have a div <div id="masterdiv"> which has several child <div> s. Example: <div id="masterdiv"> <div id="childdiv1" /> <div id="childdiv2" /> <div id="childdiv3" /> </div> How to clear the contents of all child <div> s inside the master <div> using jQuery? jQuery('#masterdiv div').html(''); Emil Ivanov jQuery's empty() function does just that: $('#masterdiv').empty(); clears the master div . $('#masterdiv div').empty(); clears all the child div s, but leaves the master intact. Use jQuery's CSS selector syntax to select all div elements inside the element with id masterdiv . Then call empty()

Ok, I'm rewriting some vanilla JS functions in my current project, and I'm at a point where there's a lot of HTML being generated for tooltips etc. My question is, is it better/preferred to do this: var html = '<div><span>Some More Stuff</span></div>'; if (someCondition) { html += '<div>Some Conditional Content</div>'; } $('#parent').append(html); OR var html = $('<div/>').append($('<span/>').append('Some More Stuff')); if (someCondition) { html.append($('<div/>').append('Some conditionalContent'); } $('#parent').append(html); ? From a performance standpoint: it depends . In your short example

Text changed to <p href="page.html" class="class1 class2" id="thisid">Text</p> I'm familiar with jQuery's replaceWith but that doesn't keep attributes/content as far as I know. Note: Why would p have a href ? Cuz I need to change p back to a on another event. try this: var $a = $('a#thisid'); var ahref = $a.attr('href'); var aclass = $a.attr('class'); var aid = $a.attr('id'); var atext = $a.text(); $a.replaceWith('<p href="'+ ahref +'" class="'+ aclass +'" id="'+ aid+'">'+ atext +'</p>'); Here is a more generic method: // New type of the tag var replacementTag = 'p'; // Replace all a tags with