I am trying to change inner html of an element. If we use this:
$('.best-photos-button')[0].innerHTML="Add More Photos";
it works fine. But if instead of ".innerHTML" i.e. JavaScript if we use .html() like this :
$('.best-photos-button').html("Add More Photos");
then it's not working. Why so?
When I am running $('.best-photos-button').innerHTML on console it's giving undefined.
$('.best-photos-button') is a jQuery object. When you use $('.best-photos-button')[0] it will return the raw DOM element, which does not have a .html() method, only .innerHtml.
So you either need to use
$('.best-photos-button').html("Add More Photos");
or use .innerHtml
Edit:
Note that if you use .html() it will affect all the elements with best-photos-button class. So depending on your use case you might need to use a different selector or filter the selection to get the specific object you need.
Related
I am unable to understand why $('#mdiv input')[1].hide(); does not work and at same time why $('#mdiv input')[1].click(); works fine?
Firstly I want to know why? Secondly how to make it working without having the id of the element?
Here is JSFiddle Link to see what i am trying and what I need
That's because you are converting the jQuery object to DOM element object which has no hide method, your second code works as DOM element object has click method like jQuery object. You can use eq method instead which returns a jQuery object.
$('#mdiv input').eq(1).hide();
If you not want to select tags by id, you can use
$('input[name="firstname"]')...
// or
$('input[type="text"][name="firstname"]')...
I want to set attributes to tag without jQuery.
I have to set this dynamically.
I understand in jQuery you just do $('html') but without jQuery, I tried Document.getElementById('html') but does not work.
How can I do this?
In the general case, the standard DOM equivalent to jQuery('element_name'); is document.getElementsByTagName('element_name');. Note that it returns a NodeList (which is like an array) and not just an HTMLElementNode.
The HTML element, as the root element, can be accessed via document.documentElement.
Setting attribute values can be done with the setAttribute('attribute_name', 'attribute_value'); method on an HTMLElementNode. The method is buggy in older versions of Internet Explorer, so you may wish to use the equivalent DOM property instead.
For example, to replace the value of the class attribute:
document.documentElement.className = "foo bar baz";
document.getElementsByTagName('html')[0].setAttribute('name','value');
I want to make the following use .attr();
selectbox.options[selectbox.selectedIndex].value
sadly,
selectbox.options[selectbox.selectedIndex].attr("value")
is not the same, and seems to defeat the purpose of the .attr altogether. My main question is: How should one use nested .attr()s?
To get the value of any type of input element (including <textarea> and <select>) use .val():
var value = $(selectbox).val();
The .attr() translation would roughly be:
$(selectBox).find(":selected").attr("value");
....but just use .val() :)
The basic problem is that .attr() is a jQuery method. It's on jQuery objects, not on DOM elements directly, the same goes for almost all jQuery methods and plugins.
When using attr(), you have to be working with a jQuery object. So first select the relevant select box, then call attr() (or val() in this case, when you need the value of an input element).
var value = $(selectbox).val();
If you would like to retrieve the selected box's value using your current code simply pass it into the jquery object like so.
$(selectbox.options[selectbox.selectedIndex]).attr('value');
The reason they are not the same is because attr('value') gets the value of the value attribute directly from the original HTML code, it is not updated with the DOM, meaning if the value of value is changed after the page has loaded, either by user input (typing into an <input> element, or via manipulation with JavaScript, these changes will not be reflected in the returned value of .attr().
A better way is to use the .val() method of the jQuery object.
Edit
To get the attribute of the value from a DOM Element (i.e. not returned by the $() or jQuery() function) use the element.getAttribute() method, which is native, you would use it like this:
selectbox.options[selectbox.selectedIndex].getAttribute("value");
If I do this-
alert(anchor);
I get this-
"[object HTMLLIElement]"
... ok, yep, it is the element I want. So I want to get that elements ID.
So I test it like this:
alert(anchor.attr("id"));
... but I don't get any alert, nothing. I must not be selecting an element. What am I doing wrong, what don't I understand?
There are two problems:
.attr() is a function jQuery objects have, you have a DOM element (you would need $(anchor) to use jQuery methods against the element).
You don't need it anyway, the .id property will work (and be much faster), like this:
alert(anchor.id);
That's because attr is not a defined method or property on anchor. anchor is a raw HTML element object. It's not a jQuery object (I'm assuming you're using jQuery because you used the attr method).
To get the id, all you have to do is anchor.id. If you really want to use attr, you can do jQuery(anchor).attr("id").
if you are using jquery, then you need this:
alert($(anchor).attr("id"));
The attr() function is part of jQuery, but you're trying to get it from a plain DOM object. You either want to use $(anchor) (to wrap the element in jQuery) or call anchor.getAttribute("id") instead.
I have what I thought was a simple select with jQuery to change some text on a paragraph. It works perfect the traditional way i.e.
document.getElementById('message_text').innerHTML = "hello";
But with jQuery it doesn't. I have checked the values of $('#message_text') and sure enough I see the items.
$('#message_text').innerHTML = "hello";
Am I doing something wrong?
Anyone have any ideas?
When you do something like $('#message_text') what you have there is not a regular DOM object, but a jQuery wrapped set (even though in this case it'd only be one element.) If you wanted to access a particular DOM property, you could do this:
$('#message_text')[0].innerHTML = 'whatever';
$('#message_text').get(0).innerHTML = 'whatever';
However, this isn't necessary in this case as jQuery has two functions to do what you want:
html():
$('#message_text').html('whatever');
text():
$('#message_text').text('whatever');
The difference between the two is that html() will allow HTML while text() will escape any HTML tags you pass to it. Use the one you need over manually manipulating the HTML with innerHTML.
The jQuery function $() is not returning a HTMLElement object like getElementById() does but a jQuery object. And there you just have the html() method as equivalent to innerHTML. So:
$('#message_text').html('hello');
$('#message_text').html('hello')
jQuery selector returns an array, not a DOM Element node.