dom-manipulation

Can someone explain why the following snippet does not add <foo> to both #a and #b ? HTML: <div id="a"></div> <div id="b"></div> JS: $(function(){ var $foo = $("<foo>HI</foo>"); $("#a").append($foo); $("#b").append($foo); }); jsfiddle Edit: thanks for the helpful points, the fact that .append() moves the element explains this behavior. Since the element in my application is actually a Backbone View's .el , I prefer not to clone it. Because using append actually moves the element. So your code was moving $foo into the document at #a , then moving it from #a to #b . You could clone it instead

I need to create a label and text field on the fly and also include datepicker for the textfield. I need something like this: <label for="from">From </label> <input type="text" id="from" name="from" /> I have tried something like this in jQuery: var label = $("<label>").attr('for', "from"); label.html('Date: ' + '<input type="text" id="from name="from" value="">'); $(function() { $("#from").datepicker(); }); This one somehow doesn't create the label and also the text field. I am not sure what I am missing. EDIT To be more precise, I am using this in the portlets and I don't have body tags in

How do you add boolean attributes using JavaScript? For example, how can you change: <p> to <p contenteditable> <p> to <p data-example> In general, you can use element.setAttribute('attributeName', 'value') or element.propertyName = value to toggle an element’s attributes or properties. Boolean attributes For boolean attributes, set the attribute with the same-named value: element.setAttribute('disabled', 'disabled'); Removing a boolean attribute works the same way as other attributes: element.removeAttribute('disabled'); However, neither of your two examples are boolean attributes !

I have a angular directive which will produce bootstrap form-group, looks for $scope.errors for value of ng-model of the directive to show errors.. Example below: My html code: <input type="text" b-input ng-model="data.company.name" label="Company Name" class="form-control"/> and my directive code: app.directive('bInput', function ($compile) { return { restrict: 'EA', replace: true, link: function (scope, element, attrs) { var div = $('<div>', { 'class': 'form-group', 'ng-class': " 'has-error' : errors." + attrs.ngModel + " != null " }); $compile(div)(scope); element.wrap(div); if (attrs.label

I am following https://docs.angularjs.org/guide/scope . 5.The $watch list detects a change on the name property and notifies the interpolation, which in turn updates the DOM. 6.Angular exits the execution context, which in turn exits the keydown event and with it the JavaScript execution context. 7.The browser re-renders the view with update text. I am having doubt what is the differnce between updates the DOM on Line 5 and browser re-renders the view on line 7. Thanks In advance. The DOM represents the HTML document loaded in the browser. JavaScript can manipulate the document through the DOM

I want to replace one div with another when hovering over it. Specifically there will be an average in words, such as "struggling" or "exceeding expectations", and I want to replace this with the numerical average when the user hovers over the average in words. #html <div class="switch avg_words float_left"> A+ (hover to see score) </div> <div class="avg_num"> AVG = 98.35% </div> #css .avg_num { display: none; } #jquery $('.switch').hover(function() { $(this).closest('.avg_words').hide(); $(this).next('div').closest('.avg_num').show(); }, function() { $(this).next('div').closest('.avg_num')