jquery changing innerhtml of a P isn't working - javascript

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.

Related

applying html method of jquery on jquery object

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.

jQuery: render element to the DOM, then select it with jquery selector

Trying to understand something here: if I render something to the DOM from javascript, and want to call jQuery methods on it, it behaves differently than if I "re-select" the element from the DOM. Here's a simple example, in CoffeeScript:
element = """
<div id="my_div">TEST!</div>
"""
$('body').html(element)
element.hide() #this doesn't work.
$(element).hide() #this doesn't work either.
$('div#my_div').hide() #this does.
So, I seem to be misunderstanding something here. I guess the element variable is just a string and jQuery doesn't understand that it has been added as an element in the DOM.
Is there a different way to insert content into the dom, then, so that it behaves like a normally-selected jQuery object once it has been inserted?
The reason the first line doesn't work is because element is a string. The reason the second line doesn't work is because it ends up creating another DOM version of the string.
The fix would be to maintain a ref to the DOM version of the element the first time you construct it (in JS):
var $elem = $(element);
$elem.appendTo(document.body);
$elem.hide() // should work
Hope that helps.
I think you need:
element = $('<div id="my_div">TEST!</div>');

return a single html element with jquery

How can I get jQuery to return a html element exactly the way that getElementById does?
if I console.log($('#container')) I will get :
[<div id="container"></div>]
But the API I am interacting with obviously doesn't want that (an array) - it wants :
<div id="container"></div>
I know I can achieve this with $('#container').get(0) and a few other ways, It just seems overkill - especially as I'm selecting an ID which will always be unique.
What am I missing guys?
Thanks
If you just want a single DOM element, then just use plain javascript:
var obj = document.getElementById("container");
jQuery selectors always create a jQuery object with an array of elements in it. That's just the way it's designed. If you want a single element, you either get the first element out of the jQuery object or you use a different tool.
From a jQuery object, you can get the first object either with:
$('#container').get(0)
or with:
$('#container')[0]
But, I would argue that both are more than you need if all you want is the single object that has an id. Just use document.getElementById(). If you want less typing, you could make your own short function:
function $$(id) {
return(document.getElementById(id));
}
var obj = $$("container");
try using .html() it will return the html of the element your selecting see:
http://api.jquery.com/html/

Help me understand whats wrong with my javascript

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.

Can I get the full HTML representation of an HTMLElement DOM object?

I'm using jquery to parse some HTML, something like:
$(html).contents().each(function(){
var element = this.tagName;
...
I can access the tagName, children, parent... using the DOM or the more friendly jQuery functions.
But at one point a need the whole HTML of the current element (not what innerHTML or .html() return) and I can't figure out a one liner to get it (I always could attach the tag and the attributes manually to the innerHTML).
For example:
Link
The innerHTML is Link but I'm looking for the whole Link
does that oneliner exists?
Looks like this guy has a pretty nifty solution using jQuery: outerHTML
just saw the anwser for this on the other thread :D
outerHTML
outerHTML 2

Categories

Resources