how to add text link inside a div using jquery? - javascript

I want to place some text as link inside a div.
For example, I want to place text 'Google' with hyperlink <a href="http://www.google.com" inside a div having class-id as "my-link".
How can this be done using jquery or javascript?

Class and ID is not the same.
If ID try this:
$('#my-link').html('Google');
Demo with ID
If Class try this:
$('.my-link').html('Google');
^
Demo with class

You can do this :
$('.my-link').html('Google');
but it would add hyperlink to all .my-link divs, so it's better to add an ID to div and use the ID on jQuery code.

If my-link is the class of the target div then
$('.my-link').html(function(idx, html){
return html.replace(/Google/g, 'Google')
})
Demo: Fiddle

Related

How can I get text from href?

I've got problem with getting this text from href. I'm working on dom and I'd like to get text from this href:
<div class='xx'>
<a href='zz' class='button>
...
I was trying to do sth like that:
document.getElementById(".xx").getAttribute("href")
But it's not working properly
But it's not working properly
Because
you don't have an element with id attribute .xx,
.xx targets the div not the anchor
Also, your anchor tag's attribute class is not closed properly, also closing tag is not given either.
<div class='xx'>
<a href='zz' class='button'>Some text</a>
</div>
you have a class so use the class selector itself using querySelector
document.querySelector( ".xx .button" ).getAttribute( "href" )
or simply
document.querySelector( ".xx .button" ).href;
getElementById will grab an element by that ID. You have an anchor (malformed albeit) with not an ID but a class. Secondly you are targeting the parent div. You should be targeting the tag using querySelector() instead. Then to get the href you'd use href.
const href = document.querySelector('.xx .button').href;
console.log(href);
<div class='xx'>
<a href='zz' class='button'></a>
</div>
This works for me
document.getElementsByClassName("xx")[0].getElementsByTagName("a")[0].getAttribute("href")
The code below will get text from link:
var x = document.getElementsByClassName('xx')[0].getElementsByTagName("a")[0].getAttribute("href");
you can use id instead of class because class returns undefined value.and also you tried to get class using getby id
wrong:
document.getElementById(".xx").getAttribute("href")
function h()
{
alert(document.getElementById("button").href);
}
<a href='zz' id='button' onclick='h();'>
asd</a>
var yourhref = document.querySelector("div.xx a.button").href
yourhref holds your requested value. This is as precise as it gets using only the part of code you provided. If somewhere else on the page you have a div with class xx and a link with class button you are not gonna have a good time.
Solution - either have your targeted element or parent have UNIQUE id and then write a selection from there.

how to get span value and add the value as class/id to DOM

Please help, I need to get the value of the span eg. <span itemprop="title">God Of War</span> which is "God Of War" and assign the value as an ID or Class to a div. How can I do that in Javascript?
<span itemprop="title">God Of War</span>
<div>You will see result here</div>
<button>Do</button>
jQuery
$(function(){
$('button').click(function(){
$('div').attr('class', $('span[itemprop="title"]').html())
.html('filled a class');
});
});
Click the button -> Right click the div -> inspect element -> and you will see your div has been filled with class you want.
See here -> http://jsfiddle.net/aldiunanto/HdPWs/
You tagged your post as jquery so I'm assuming jquery is acceptable. Take a look at these functions in the jquery api for more details.
$('div').attr('id', $('span[itemprop="title"]').html());
Frist you can assign a class or id to the span then
Use Javascript simple
document.getElementById('spanid / class').innerHTML;

Add the Class Dynamically using Jquery?

How can i add the class selectors dynamically to the img tag. For Example:
img tag should be inside the anchor tag then only the class name:sample should add dynamically whichever anchor tag contain img like,
Before:
<img src="image.png"/>
After:
<img src="image.png" class="sample"/>
If already image tag contain class then remove that class and the new class is possible in jquery. I am not sure, how can i do this in jQuery.
Any suggestion would be great.
Thanks,
vicky
You just need to toggle your class. To do this, see:
$("img").toggleClass("border");
I made an example for you on CodePen. Just click here.
$(document).ready(function(){
$('your selector').addClass('sample'); //It can be select,img,a,etc.. });
Be specific in your tag for choosing. I use in CakePHP 3.x Date HtmlHelper field and it worked like a magic.
if($('a[href=image.png] > img').hasClass('sample')){
$('a[href=image.png] > img').removeClass('sample');
}
And addClass for else part.
This can be done easily via jQuery.addClass and jQuery.removeClass APIs..
Add Class - http://api.jquery.com/addClass/
Remove Class - http://api.jquery.com/removeClass/
This should do it:
$('a img').removeClass().addClass('example')
$(document).ready(function(){
$('a >img').addClass('sample'); //direct descendant of a
});
HTML code:
<img id="testImg" src="xyz.jpg" />
css code:
.displayNone{
display:none;
}
jquery - to add class
`$("#testImg").addClass("displayNone");`
jquery - to remove class
$("#testImg").removeClass("displayNone");

Add class to a div via Jquery

I have the div which is generated when page loads as below.
<div class="redactor_ redactor_editor"></div>
How can I add a class .example onto it via jquery like below?
<div class="redactor_ redactor_editor example"></div>
Thank you very much!
Try addClass this,
$('.redactor_').addClass('example');
just select element using any selector
$(selector).addClass('example');
demo
you can add class to element by using the .addClass()
syntex
.addClass( className )
className One or more class names to be added to the class attribute of each matched element.
so now this is you want
$('.redactor_ redactor_editor').addClass('example');
try this :
<pre>
$(window).load(function () {
$('.redactor_ redactor_editor').addClass('example');
});
</pre>
reference :
addClass
You can set the class regardless of what it was by using .attr() like this,
If the html is like this,
<div class="redactor_ redactor_editor"></div>
then the selector will be like the following,
$(document).ready(function() {
$('.redactor_redactor_editor').attr('class', 'redactor_redactor_editor example');
});
Since your div tag's class name has a space after the underscore sign(i.e. redactor_ ) the following way must be applied to select the element.(<div class="redactor_ redactor_editor"></div>)
$(document).ready(function() {
$("div[class='redactor_ redactor_editor']").attr('class', 'redactor_ redactor_editor example');
});
If you are looking for adding a new css class to an element that already has a class then-
DEMO
HTML-
<div class="one">example</div>​
CSS-
.one{color:red;}
.two{color:green}​
jQuery-
$(function(){
$('.one').addClass('two');
});​
If you are looking for removing the old css class and add a new class-
DEMO
jQuery-
$(function() {
$('.one').removeClass('one').addClass('two');
});​

How to target a div with a class and an inner p tag

I have a structure that looks like this..
<div class="infobubble">
<p>
PLACE CONTENT HERE
</p>
</div>
How do I use jquery to target the in tags?
I tried this but did not work.
$("infobubble p").html('My Text');
Your code is wrong, you need to specify that you are looking for a class, like so
$(".infobubble p").html('My Text');
Your code $("infobubble p") would be looking for a tag element named infobubble which does not exist
$(".infobubble p").html('My Text');
in jQuery you need to add an '.' to select by class or '#' to select by id.
If no '.' or '#' is specified, jQuery will try to find an element by tag name... in your case it was trying to find <infobubble> which isn't an element.

Categories