jquery- keep an image at the top of div - javascript

I have a root div element and inside that div i have an image.
<div id="root">
<img id="msg"/>
</div>
Now using jquery i used to prepend n number of div elements inside that root div. The issue is that the new div elements come before the img tag. . like
<div id="root">
<div id="b"></div>
<div id="a"></div>
<img id="msg"/>
</div>
But I need it to prepended div elements to appear after the img tag like
<div id="root">
<img id="msg"/>
<div id="b"></div>
<div id="a"></div>
</div>
Any suggestions as to how I can achieve this using jQuery?

Try:
$("your html").insertAfter($("#msg"));

Like this maybe:
$("#msg").after();

Simply use the append method instead of prepend like this:
$('#root').append('<div>Div N</div>')
Here is the working example in JSFiddle.
And here is the documentation on jQuery's append method.

Use append() instead of prepend():
append() method add div after first div
prepend() method add div before first div.

Try
var newDiv = $("<div>test</div>");
$('img').after(newDiv);

Related

I want to add html tag without ending tag

I want to add html tag without ending tag like that <div class="bottom-widget"> . For that I use jQuery prepend() method but full tag was added by this !
Html Markup -
<div class="widget">
<h2>this is content 1</h2>
</div>
</div>
Javascript Code :
$(".widget").prepend('<div class="bottom-widget">');
Perhaps you are looking for wrapInner function.
And you code will be:
$(".wrapInner").wrapInner("<div class='bottom-widget'>");
I assume you need correct html so after this opening tag you will have another with closing one. For this reason you can use jQuery wrapInner function (http://api.jquery.com/wrapinner/)
First extract(or create) the element you want to be wrapped in your bottom-widget element, than create bottom-widget element and insert above-mentioned element into it.
$(".widget").prepend("<div class='bottom-widget'></div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<h2>this is content 1</h2>
</div>

jQuery: move the complete element into another one, but not its content only

There is the source DIV element that must appear within the target DIV.
And there is jQuery appendTo method that seems to do that for me.
For example:
<div class="source">Move Me</div>
<div class="destination"></div>
jQuery(document).ready(function(){
jQuery('.source').contents().appendTo('.destination')
});
But actually it only moves source's content into the target DIV, keeping the empty source DIV where it originally was: here is the JSFiddle that demonstrates this.
So, instead of
<div class="destination">
<div class="source">Move Me</div>
</div>
the appendTo result is just
<div class="source"></div>
<div class="destination">Move Me</div>
Is there a way to achieve
<div class="destination">
<div class="source">Move Me</div>
</div>
without extra wrapping elements?
$.contents() will grab the content of the element, but leave the element itself alone. The default behavior of $.append() and $.appendTo() is to move the entire element. So in your example, you simply need to use jQuery('.source').appendTo('.destination') and that will move .source in to .destination
jQuery('.source').appendTo('.destination')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="source">Move Me</div>
<div class="destination"></div>
Just get rid of that .contents() method to move the whole element.
$('.destination').append($('.source'))
will turn
<div class="destination"></div>
<div class="source">Move Me</div>
into
<div class="destination">
<div class="source">Move Me</div>
</div>
Simply exclude .contents() in your own solution, this way:
jQuery(document).ready(function(){
jQuery('.source').appendTo('.destination')
});
Then it will move Div.source completely into Div.destination. Here is the fiddle: https://jsfiddle.net/NDFA/cur9qg2w/
First all.The Jquery's appendTo behavior is append after an element to another element. So that behavior is correct. Also append method may be you need.

Call image src using jquery

I've got a image inside a div. Below is the current div structure.
<div id="imgHolder">
<img class="smallthumb" src="imgHolder.png">
</div>
How can I call the image using jquery and get the same output as above?
I tried this:
$('#imgHolder').attr("src", "profile.png");
but then the final output is:
<div id="imgHolder" class="smallthumb" src="imgHolder.png"></div>
imgHolder is the ID of the div element so #imgHolder will refer to the div element that is why the src is getting added to the div element.
You need to find the image inside the div so you can use a descendant selector along with the id selector like
$('#imgHolder img').attr("src", "profile.png");
$('button').click(function() {
$('#imgHolder img').attr("src", "//placehold.it/64X64&text=profile");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="imgHolder">
<img class="smallthumb" src="//placehold.it/64X64&text=holder">
</div>
<button>Change</button>
You need to select the img to change the attribute of img.
$('#imgHolder img').attr("src", "profile.png");
As img is the direct child of div, you can also use the children > selector
$('#imgHolder>img').attr("src", "profile.png");
Demo
$('#imgHolder > img').attr('src', 'profile.png');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="imgHolder">
<img class="smallthumb" src="imgHolder.png">
</div>
Update
If you want to add image dynamically:
$('#imgHolder').html('<img src="http://img42.com/kzCbY+" />');
Demo
You can use .find to find any descendants like so :
$('#imgHolder').find('img').attr("src", "profile.png");

Adding attributes to all html tags

I want to add id="draggable" attributes to all tags.
For example -
<img src="http://sample.jpg"> should change to <img src="http://sample.jpg" id="draggable" >
<p>abcd</p> should change to <p id="draggable">abcd</p>
This should apply to all tags except <HTML><HEAD><script><style>
Any suggestion?
Use class instead of Ids
var elems = document.body.getElementsByTagName("*");
elems.setAttribute("class","draggable");
ID(s):
Each element should only have one ID
Each page can only have one element with that ID
CLass(s):
You can use mutliple classes on one element.
You can use the same class on multiple elements
Adding same id to all the HTML elements is not a good way. Better to have same class name. Dynamically, if you want to add same class to all the elements, you can do something like below
$('#parent').find('*').addClass('draggable');
http://jsfiddle.net/663m8qyd/
<div id='parent'>
<p>ABC</p>
<img src='http://www.w3schools.com/tags/smiley.gif' alt="Smiley face"/>
<div id='child'>
<div id='child1'>test1</div>
<div id='child2'>test2</div>
</div>
</div>
To add draggable class to all the elements inside parent div, find each element and add respective class.
Hope that helps!

How to get the first element from a parent in several places

I have this HTML structure:
<div class="fullNews">
<div class="mainText">
<img src="/contentthumbs/news-16_thumb.jpg">
<img src="/contentthumbs/news-17_thumb.jpg">
<img src="/contentthumbs/news-18_thumb.jpg">
<img src="/contentthumbs/news-19_thumb.jpg">
</div>
</div>
<div class="fullNews">
<div class="mainText">
<img src="/contentthumbs/news-20_thumb.jpg">
<img src="/contentthumbs/news-21_thumb.jpg">
<img src="/contentthumbs/news-22_thumb.jpg">
<img src="/contentthumbs/news-23_thumb.jpg">
</div>
</div>
I am trying to apply a CSS class to only the first hyperlinks of each lot of parent divs through JQuery:
$('.mainText a:first').addClass('mainPhoto');
But it only adds the class to the first hyperlink of the first div group. I need that all the first hyperlinks of each <div class="mainText"> get the class, in this example:
<a href="news-16.jpg">
<a href="news-20.jpg">
Thanks in advance
Why jQuery? use pure CSS:
.mainText a:first-child {
<your properties>
}
About your jQuery error:
you have used :first that is not a CSS selector but a jQuery selector, that matches only the first matching element.
You should instead use :first-child that is a CSS selector and will select each first-children matched.
Use first-child Selector, it selects all elements that are the first child of their parent. While :first matches only a single element
$('.mainText a:first-child').addClass('mainPhoto');
DEMO
In case of you want to do it with only javascript, then use this code.
var allDivs = document.getElementsByClassName("mainText");
for(var i=0; i<allDivs.length; i++){
//firstElementChild referes the first element of div
allDivs[i].firstElementChild.className = 'mainPhoto';
}
Demo you can on http://jsfiddle.net/7DS5F/19/

Categories

Resources