We Keep Coding

How i can show the href of all my <a> links inside a span beisde the <a>

I have the following markup, which represents a table which have <a> inside its <td>:-
now i am trying to find a way using javascript, to show the href of all the <a class="ms-listlink"> beside them.so the <td> will contain something as follow:-
Design Transfer
http://***/buisnessfunctions/pmo/progammes/136/
instead of just showing the text:-
Design Transfer
so is there a way to achieve this?

You can do this without javascript - css has a content property that can access attributes. Here's an example:
a {
display: block;
}
a:after {
display: inline-block;
margin-left: 1em;
content: attr(href);
}
Google
Zombocom

Loop through each link, read its href property and insertAfter the link.
$('.ms-listlink').each(function(){
var link = $(this).attr('href');
$(this).insertAfter('<span>'+ link +'</span>');
});

I prefer the CSS solution above, but here's the JS solution FWIW
$('.ms-listlink').each(function() {
const href = $(this).attr('href');
const $td = $(this).closest('td');
$($td).append(href);
})

I really like the CSS answer. Tiny, easy, concise. Just in case you are curious (or for some reason require a JS-only solution), here is a way to do it in plain vanilla JavaScript (no additional libraries):
<div id=container>
<a href=https://google.com >GOOGLE </a> <span></span> <br />
<a href=https://faceboook.com >FACEBOOK </a> <span></span> <br />
<a href=https://yahoo.com >YAHOO </a> <span></span> <br />
</div>
<script>
var container = document.getElementById('container');
var anchor = container.getElementsByTagName('a');
var span = container.getElementsByTagName('span');
for(var item in anchor) {
span[item].innerHTML = anchor[item].href;
}
</script>
*NOTE: If you need the url's to be a clickable part of the hyperlinks, put the span's inside the 'a' tags.

JQuery single and double quotes problems

I am trying to insert a tag into the page. but inside that a tag, it has both single quote and double quote, so i try put that part into an variable Var content. Can someone tell me why this var content is not showing on onclick after code runs?
var content = "javascript:window.open('https://ds.contactatonce.com/ds/p10819departmentselector.htm?OriginationUrl='+encodeURIComponent(location.href),'','resizable=yes,toolbar=no,menubar=no,location=no,scrollbars=no,status=no,height=520,width=450');return false;"
$('<a style ="float: left; margin-top: 20px" href="#" onclick=" + content + " ><img onerror="this.height=0;this.width=0;" border="0" alt="Click to instant message Representative Now!" title="" src="https://dm5.contactatonce.com/getagentstatusimage.aspx?MerchantId=270075&ProviderId=10819&PlacementId=10"></a>').insertBefore('.header-contact-phone');
it was like this before but it keep showing errors
$('<a style ="float: left; margin-top: 20px" href="#" onclick="javascript:window.open('https://ds.contactatonce.com/ds/p10819departmentselector.htm?OriginationUrl='+encodeURIComponent(location.href),'','resizable=yes,toolbar=no,menubar=no,location=no,scrollbars=no,status=no,height=520,width=450');return false;" ><img onerror="this.height=0;this.width=0;" border="0" alt="Click to instant message !" title="Click to instant message a Now!" src="https://dm5.contactatonce.com/getagentstatusimage.aspx?MerchantId=270075&ProviderId=10819&PlacementId=10"></a>').insertBefore('.header-contact-phone');

Use the escape character \ before the quotes
like this:
var y = "We are the so-called \"Vikings\" from the north.";
see this links:
https://www.w3schools.com/js/js_strings.asp
https://www.w3schools.com/js/tryit.asp?filename=tryjs_strings_escape

I can't assign an ID to an already loaded Java script

I tried everything and couldn't link my Image IDs to a preloaded Generic.js file in the Head section. Here's my HTML below:
<div id="bgimgwrapper">
<noscript>
<div>
<img id='bgNoScript' src='index_files/background1.jpg'
alt='' title='' width='100%' height='100%' />
</div>
</noscript>
<img class="active" id="bg0" src="index_files/background1.jpg"
style="width: 100%; display: none;">
<img id="bg1" src="index_files/background2.jpg"
style="width: 100%; display: block;">
</div>
bg0 and bg1 should be assigned to a function inside the preloaded generic.js, here's the function:
function bgStart() {
setCurrentCycle();
$bg = $('<img style="width:100%">'), bg = $bg[0];
$bg.hide().load(bgLoad);
$bg.addClass("active");
bg.id = "bg" + currentCycle;
bg.src = slideArray[currentCycle];
$bg.appendTo("#bgimgwrapper");
theWindow.resize(resizeBg)
}
bgStart() basically is a background image slider. In firebug though, I can't even see the evaluation "ev" sign next to each ID divs. Appreciate your comments.

don't understand why you are using 2 references for your new bg element... how about:
$bg = $('<img style="width:100%">');
$bg.hide().load(bgLoad)
.addClass("active")
.attr('id', 'bg' + currentCycle)
.attr('src', slideArray[currentCycle])
.appendTo("#bgimgwrapper");
theWindow.resize(resizeBg);

How to remove previous li on anchor click

I am setting some <li> and anchor tag using jQuery . Now i want to remove the attach li on anchor click.Let me show on code what I am trying to do.And I can't assign any id to these elements as they are generating dynamically.
<ul id="imagess">
<li><img width="60" height="60" src="http://example.com/images/event.png"></li> <img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
<li><img width="60" height="60" src="http://example.com/images/event2.png"></li> <img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</ul>
I am trying to remove the <li> on deletit() js function call

A solution for your current HTML using event delegation.
$(document).on('click', 'li + a', function(){
$(this).prev().remove();
})
However, your HTML/JS should look more like this to be valid:
$(document).on('click', '#imagess li a', function(){
console.log(this);
$(this).closest('li').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="imagess">
<li>
<img width="60" height="60" src="http://example.com/images/event.png">
<a href="javascript:void(0);">
<img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</a>
</li>
<li>
<img width="60" height="60" src="http://example.com/images/event2.png">
<a href="javascript:void(0);">
<img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</a>
</li>
</ul>

$('ul a').click(function() {
$(this).prev().remove();
});
prev() gets the previous sibling to the a element, which is the li. remove() is pretty self explanatory.
Also, your HTML is invalid. The only elements allowed as direct children of ul are li elements.
Edit: The answers with "closest" given above will be correct if you move the a inside the li. People are assuming they're already in there as the HTML is invalid otherwise.

Update : remove inline onclick attribute from a tag as you have defined click event in code itself
Previous fiddle : http://jsfiddle.net/Lp88exqb/
New Fiddle : http://jsfiddle.net/Lp88exqb/1/
You should not have a tag as direct child of ul tag, it should be in li tag and than you have to use following code to remove previous li on any click
$('ul a').click(function() {
$(this).parent().prev().remove();
});

1. Step 1
Your HTML CODE has to be like this
-------------------------------------
<code>
<ul id="imagess">
<li>Img1</li>
Img1
<li>Img2</li>
Img2
</ul>
</code>
-------------------------------------------
2. Write a JS Funcion like this
-------------------------------------------
function deleteit(obj){
$(obj).prev('li').remove();
}

You have the jQuery tag, so here is an example with that:
$(this).closest('li').prev().remove();
Update: from the wording of question details and your comment, it sounds like path is the anchor itself, and that you don't want to remove previous li, but the container li itself, if so, change to:
$(path).closest('li').remove();
Update 2
Check this:
$('#imagess').on('click', 'a', function() {
$(this).prev('li').remove();
return false;
})
However, this is only for your invalid HTML, where the <a> lives directly inside <ul>. In correct way, the <a> should be inside the <li>, which I see is now fixed in another answer.

How to popUp image and link with javascript or jQuery?

If you know about how to do something like this,
I mean how to load a javascript or jQuery popUp image onLoad (once) and how can i link it to somewhere else, please help me =(
Thanks a lot..

http://lokeshdhakar.com/projects/lightbox2/
window.onload= function(){
var myEvt = document.createEvent('MouseEvents');
myEvt.initEvent(
'click' // event type
,true // can bubble?
,true // cancelable?
);
document.getElementById('myLink').dispatchEvent(myEvt);
}

here's a tutorial on how to create the modal container
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
once you have it you can trigger the modal window inside
$(document).ready(function(){
// trigger modal here
});

It looks like the div is just set to visible when the page loads.
<div id="lightBox" style="width:100%; height:100%; position:absolute; z-index:1100; background:url(images/bgfb.png);display:block">
<div id="ekranKapla" style="position: absolute; top: 50%; left: 50%; margin-left:-255px; margin-top:-196px;display:block">
<img src="/images/lightbox.png" border="" alt="facebook" useMap="#mapThis" />
</div>
</div>
<map name="mapThis" id="mapThis">
<area shape="rect" coords="470,2,509,37" onclick="javascript:lightBoxKapat();" href="#" />
<area shape="rect" coords="293,294,496,370" href="http://www.facebook.com/EczacibasiToplulugu" target="_blank" title="facebook " />
</map>
<script type="text/javascript">
function lightBoxKapat() {
document.getElementById("lightBox").style.display = "none";
document.getElementById("ekranKapla").style.display = "none";
}
</script>
Then the user can click on it to hide it.

Don't use JavaScript for that - at least not to show it. To have a picture displaying when the page loads, just code the HTML that way.
To show or hide it later, just use:
$("#popupContainer").show();
$("#popupContainer").hide();
Working demo: http://jsfiddle.net/7rVaZ/