Insert javascript in HTML - javascript

i have this code:
<a href='google.com' title=' '> <script>exam='y';</script> </a>
I want to add this script <script>exam='y';</script> inside title tag, like this:
<a href='google.com' title=' <script>exam='y';</script> '> <script>exam='y';</script> </a>
But it does not work. Hope for your helps.

Put your javascript separate in script tag and then point to your element attribute to set it
<a id="myId" href='google.com' title=''> my link </a>
window.onload = function () {
document.getElementById("myId").setAttribute("title", "some title");
}
fiddle: http://jsfiddle.net/djwave28/rHddx/1/
If you set your title dynamically, you do not need the attribute in the tag. It will be set by javascript, as thfollowing fiddle will show you.
http://jsfiddle.net/djwave28/rHddx/2/

Related

Dynamically changing (appending string to existing url) href using jquery is appending it twice

I am trying to dynamically append a string to href using jquery 'attr'. I am not able to understand why the below code that I wrote is appending the string twice in existing href. Please help. I have read a lot many articles but unfortunately not help.
var olduri = $('a.link').attr("href");
$('a.link').attr("href", olduri + 'www.google.com');
HTML code is:
<div>
<a class="link" target="_blank" title="Welcome" href="https://example.com?redirect=www.test.com&">
Click</a>
</div>
Result is:
https://example.com?redirect=www.test.com&www.google.comwww.google.com
www.google.com is coming twice. Please help me get it fixed.
I don't quite understand why you want the & as the only separator for these but my suggestion for a cleaner approach is to update the search property not the attribute
$('a.link').prop("search", function(i, curr){
return curr + 'www.google.com';
});
console.log($('a.link')[0].href)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="link" target="_blank" title="Welcome" href="https://example.com?redirect=www.test.com&">
Click</a>
</div>
Your code just works fine. See here. Also a bit of context would really help. Are you planning to append the url onclick event?
$('.showUri').text($('a.link').attr("href"));
$('a.link').on('click', function(e){
e.preventDefault();
var oldUri = $(this).attr('href');
$(this).attr('href', oldUri + 'www.google.com');
$('.showUri').text($('a.link').attr("href"));
});
<div>
<a class="link" target="_blank" title="Welcome" href="https://example.com?redirect=www.test.com&">
Click</a>
</div>
<p class="showUri"></p>

jquery to modify a link on page

is it possible with jquery to use DOM to find an a link inside a div, such as
<div id="something">
<a href="somewhere" title="something">
<img>
</a>
</div>
and append a datum to the link - in my case a google events tag:
onClick="_gaq.push(['_trackEvent', ' PDF Downloads', ‘Click', 'SEO For Beginners');"
dynamically to the a link so that the end result would be:
<div id="something">
<a href="somewhere" title="something" onClick="_gaq.push(['_trackEvent', ' PDF Downloads', ‘Click', 'SEO For Beginners');">
<img>
</a>
</div>
thank you for your time; any help would be greatly appreciated
let tag = $('#something').find('a');
tag[0].onClick = "_gaq.push(['_trackEvent', ' PDF Downloads', ‘Click', 'SEO For Beginners')";
you find the div you need by id, and by using function find() you serach your a tag.
After that you just refer to the DOM object of your tag by tag[0] and set onClick whatever you like.
It would be better if you just catch desired element with selector and bind a function to it, instead of binding a function directly in DOM.
$('#something a').click(function() {
_gaq.push(['_trackEvent', ' PDF Downloads', 'Click', 'SEO For Beginners']);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="something">
<a href="somewhere" title="something">
<img>
</a>
</div>

How to make this JS link work?

I want to put a site link in my site and I don't want to show it in the status bar, so I used this code below but it's not clickable.
<a rel"nofollow" href="javascript:;" onclick="location.href='http://sitelink">text</a>
And, is the rel"nofollow" work with this code?
Try:
<a rel="nofollow" href="#" onclick="location.href='http://sitelink'">text</a>
rel is an attribute so use an =
use # in the href so that the link does target the current page
in the onclick you have a mess with the quotes, you forgot the closing '
But instead of misusing an a tag you could also use a button or span for your purpose:
<button onclick="location.href='http://sitelink'">text</button>
Try this:
<a rel="nofollow" href="Javascript:void(0)" onclick="window.location='http://sitelink'">text</a>

on dom ready remove existing html attribute and add mine

My generated portion of page source is
<a target="_blank" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
and I need on page load to replace this a target with a rel so above link should be
<a rel="lightbox" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
I trid with after </body>
<script>
$(function() {
$('a[_blank]').removeAttr('_blank').attr("rel=","lightbox");
});
</script>
You need to use the attribute equals selector - you need to use the attribute name along with attribute value, also to remove you need to use the attribute name not value.
$('a[target="_blank"]').removeAttr('target').attr("rel","lightbox");
Your code looks for an anchor element with attribute _blank and then removes it, a anchor element like <a _blank href="/img/image001.png">
Also as #PaulDraper suggested move the script inside the body element
$(document).ready({
$('a[target=_blank]').attr('rel', 'lightbox');
})

How to populate href value from src value of an image?

I know this is super simple, but I can't work it out (I'm a designer).
I want to simply populate the href attribute value of the <a> tag, with the value of the src attribute of the <img> tag. So the image links to itself basically.
the image src will be updated through a super simple CMS and I want the link to dynamically update, instead of the user having to update the URL also.
I tried something like this, but it didn't work.
<a rel="lightbox[job1]" href="()document.getElementById("gal1_img1").src">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
You cannot inline JavaScript inside attributes the way you have currently. You can add a script to the page to do this:
<a id="link" rel="lightbox[job1]" href="#">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
<script>
document.getElementById("link").href = document.getElementById("gal1_img1").src;
</script>
try this as your <a>'s href:
href="javascript:window.location=this.getElementsByTagName('img')[0].src;"
Assuming there's only ever one image inside these <a> tags, this should work for anyone who's NOT running with javascript disabled.
try this.
var att = $('#gal1_img1').attr('src');
$("a[rel*='lightbox[job1]']").attr('href',att);

Categories

Resources