Develop Reference

How append html in a <div>

I have a div in my html page with a id:
<div id="home">
I need to put some html like a link so I use jquery and my code is:
$('#home').add('<a href=..../a>);
The problem is that if I go control the DOM with google chrome I can see the element in the div but I can't see the link the page.Anyone can help me?

Use append() to append content to the div.
$('#home').append('<a href=..../a>');

How to set whole Div Contents clickable like a HyperLink?

I am developing website by using ASP.net. I have following div layout
<div class="mainrepeater">
<div id="image" class="my-ad-repeater-image-box"/>
<div class="my-repeater-title">
<asp:HyperLink ID="hlNavigation" runat="server" Text='<%# Eval("title") %>' NavigateUrl='<%#Eval("ad_url") %>' Target="_blank"></asp:HyperLink></div>
<div class="my-repeater-content"></div>
</div>
I am setting the HyperLink navigate URL from a datasource and everythings works fine. But I want all div(mainrepeater) to be clickable instead of the hyperlink.
So how to achieve that?.
Do I need to use javascript? If not that would be great.
Thank you very much.

CSS
.my-repeater-title { cursor: pointer; }
JS
$(".my-repeater-title").click(function(){
window.location.href = "http://example.com"
});

You should use attribute data-* to retrieve your url on your js script as:
<div class="my-repeater-title" data-url="[url]">
And get on your script:
$(".my-repeater-title").on('click', function(){
var target = $(this).data('url');
window.location.href = target;
});
It's recommended to not write external data like url directly to the js file, but to fetch on html by js.

Another possible option is to wrap <div class="mainrepeater"> with <a> tag.
But this is correct only for HTML5.
For more details please check this post Is putting a div inside an anchor ever correct?

HTML
<a class="mainrepeater_link" href="http://example.com">
<div class="mainrepeater"> ... </div>
</a>
CSS (only if you target a HTML version less than 5.)
.mainrepeater_link { display: block; }

Three possible solutions come to mind
First idea: Make the size of the link bigger
If the link is the only content of your div, you can just add the following CSS to make it fill the div.
.my-repeater-title > a
{
display:block;
width:100%;
height:100%;
}
You might need to set dimensions on .my-repeater-title though. No JS required
Second idea
Swap the div and the link. Change
<div class="my-repeater-title">
...
</div>
to
<a href="...">
<div class="my-repeater-title">
...
</div>
</a>
I'm sure that's possible in ASP too. No JS required either
Third idea: Javascript
Add a click-handler in jquery. This has already been suggested by others, so I won't copy their solution and I won't bother writing a different one.

Display href link into div

I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.

I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo

In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)

$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});

We can use an iframe to display the link in the <a> tag.
Here's a fiddle

Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});

how can the value of an href attribute be changed using javascript/css?

Assuming that the html contains the following structure:
<div>
text
</div>
<div>
<div>
//<script> or <style> must go here
</div>
</div>
...and assuming that the 'contribution' to the final HTML file can be inserted ONLY at the specified location, and assuming that the markup for the "a" element cannot be modified in any way, is it possible to add javascript or css code that will change the url that the href attribute of the previous "a" element refers to? If so, how?

You could do it without id:
document.querySelector("a[href^='http://the']")
and set the href prop:
document.querySelector("a[href^='http://the']").href=whatever
For a full reference (browser-compatibility) of querySelector see the MDN-Article

Put an id on it, e.g.
<a id="the_a_tag" href="...">...</a>
^^^^^^^^^^^^^^
then the JS is simply
document.getElementById('the_a_tag').href = 'new address goes here';
as long as you put the javascript AFTER the relevant HTML.
And note: CSS is for presentation only. With a few exceptions, it cannot affect the content of document elements, merely how they appear (color/size/position/etc...).

Give the link an id
<a href='...' id='linkToChange'>text</a>
And then access it in your script:
document.getElementById('linkToChange').href='newAddress';

You can do this using something like this:
document.getElementById("abc").href="xyz.php";
You will need to set an ID for the tag, so your tag will look like this:
<div>
text
</div>
<div>
<div>
//<script> or <style> must go here
</div>
</div>

How to add target=_blank to all PDF links inside div using jquery?

For example:
I want to add target=_blank in any PDF link comes inside this css class "class="newWindow"
Before adding script
<div class="newWindow" >
link text
link text
</div>
After adding script
<div class="newWindow" >
link text
link text
</div>
Please provide jquery code with no conflict.

Code
$(".newWindow a[href$='pdf']").attr('target','_blank');
:]
Preview:
http://jsbin.com/ojapo
View code
http://jsbin.com/ojapo/edit
Note:
in jsbin example, I also add class .bl, so you can easily see result :]
No Conflict mode:
jQuery.noConflict();
jQuery(".newWindow a[href$='pdf']").attr('target','_blank');
or
jQuery.noConflict();
jQuery(document).ready(function($){
$(".newWindow a[href$='pdf']").attr('target','_blank');
});
or another way, take a look here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

This should work
$(".newWindow a[href$='.pdf']").attr("target", "_blank");