Using jQuery, what's the performance difference between using:
$('#somDiv').empty().append('text To Insert')
and
$('#somDiv').html('text To Insert')
?
$('#somDiv').html(value) is equivalent to $('#somDiv').empty().append(value).
Source: jQuery source.
.html will overwrite the contents of the DIV.
.append will add to the contents of the DIV.
difference between append() and html() in jQuery
.append() and .html() are the most useful methods in jQuery. But these are far different from one another, .append() add some value to the existing one. Where .html() do the same but it removes the old value first.
Here is an example:
<ul id="test">
<li>test</li>
</ul>
Now I will use .append() to add one <li>, For that I will write:
<script type="text/javascript>"
jQuery("#test").append("<li>test1</li>");
</script>
The output of this jQuery will be:
<ul id="test">
<li>test</li>
<li>test1</li>
</ul>
Now if I use .html() to add one <li>, For that I will write:
<script type="text/javascript>"
jQuery("#test").html("<li>test1</li>");
</script>
The output of this Script will be:
<ul id="test">
<li>test1</li>
</ul>
Here in this example .append() add one extra <li>, whether .html() removes the old one with new one. This is the main difference between .append() and .html() in jQuery.
In simple words:
$('#somDiv').append('blabla')
works like this:
<div id='somDiv'>some text</div>
becomes:
<div id='somDiv'>some textblabla</div>
And innerHTML replaces the contents, so it becomes this:
<div id='somDiv'>blabla</div>
The correct syntax is
$("#somDiv").html("<span>Hello world</span>");
Related
I've tried a number of things but I cannot get my code to work. I want to change the text of the span containing a number in this code:
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
My JavaScript/JQuery:
(function($) {
$(document).ready(function() {
$('li.top .sec').find('span').eq(0).text('cccc');
});
})(jQuery);
I've been able to write code that changes both spans, but not the one.
Your code body appears to work to largely work.
I just tried inserting this line into the doc as follows:
$('li.top .sec').find('span').eq(0).text('cccc');
See http://jsbin.com/leyasiwexu/edit?html,js,output
So, perhaps there is something else that is causing the issue?
console.log($('li.top .sec').find('span').eq(0).text());
$('li.top .sec').find('span').eq(0).text('cccc')
console.log('changed to: ' + $('li.top .sec').find('span').eq(0).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
(function($) {
$(document).ready(function() {
$('li.top .sec').find('.inner').prev().text('cccc');
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
the .prev() method searches for the predecessor of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.
The method optionally accepts a selector expression of the same type that can be passed to the $() function. If the selector is supplied, the preceding element will be filtered by testing whether it match the selector.
Excerpt taken from the JQuery prev documentation
You can try this:
$('li.top .sec').find('.inner').prev().text('cccc');
I haven't checked, HTML Specifications, but I don't think its appropriate to nest a div inside li. I know you can work your way around presentation irregularities with css, but this might not be permissible with jQuery. Just as I said, I haven't verified. If you have to nest items inside li, use inline elements. div is block
I got the following line:
$("element").find("[attr!='val'][attr!='val'][attr!='val'][attr!='val'][attr!='val']")
based on this answer.
My page stops running. My assumption is that it finds all the different elements in the page, also the ones that don't have the attribute. Is that correct?
If so how can I fix this?
I tried the
$("element").not("[attr='val']")
// instead of
$("element").find("[attr!='val']")
and it still crashed the page.
The following code works of course:
$("element").find("[attr='val']")
JQuery Has Attribute Selector [name] select element only has attribute without consider to it value. You need to adding [attr] at the first of your selector.
$("ul").find("[class][class!='A']").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="A">A</li>
<li class="A">A</li>
<li class="B">B</li>
<li>C</li>
</ul>
I use jQuery .html() but is it possible to add an element without to removing the other HTML elements?
My code look so:
<div id="contentboxes">
<div class="con1">content 1</div>
<div class="con1">content 2</div>
</div>
I have tried this with jquery:
$('#contentboxes').html('<div class="con3">Content 3</div>');
But this command removes my other 2 boxes, is it possible to add without to removing other boxes?
use .append() instead of .html().
$('#contentboxes').append('<div class="con3">Content 3</div>');
http://api.jquery.com/append/
Using jquery 1.8.3
I am creating a function which creates an "li" element and sets some properties, including establishing an event listener.
$(this).closest('a').text(text); //$(this) is the li tag, and it does show that in the browser if you step through
The dom structure looks like this:
<div>
<a></a>
<div>
<ul>...</ul>
</div>
</div>
If you follow it in the debugger, both the .text() method and "text" variable are being populated with the correct info. There is something going on with the assignment part that I can't track. I am sure it is something stupid and obvious I am missing, but I could use some help getting over this hump.
If you need more info, please let me know.
The anchor tag is not the ancestor of the li .. Rather it is a sibling of the div in which it is encased..
You are looking for this I belive
$(this).closest('div').prev('a').text(text);
You have to use html() function from jQuery:
$(document).ready(function(){
$("#element li ").click(function(){
$("#linki").html($(this).html());
});
});
<a href="" id="linki" ></a>
<a></a>
<div>
<ul id="element">
<li>Hello</li>
</ul>
</div>
live example http://jsbin.com/opoqid/46/edit
I want to move an existing div which is inside another one to the body of HTML.
For example i have:
<body><div1><div2>blah</div2></div1></body>
I would like it to make:
<body><div1></div1><div2>blah</div2></body>
Any suggestions?
Give your divs some IDs:
<body>
<div id="one">
<div id="two">
</div>
</div>
</body>
Then use appendTo
$('#two').appendTo('body');
$('div2').appendTo('body');
(you'll have to change div2 to a proper selector of course)
use some combination of remove and append to achieve ur out put.
jQuery Remove Method
jQuery Append Method