We Keep Coding

Writing local storage value inside h2 tag of div element

I have multiple localstorage values that I want to write in the HTML code.
My main div name is data and there is an h2 tag inside that div
<div id="data">
<h2></h2>
</div>
Now if i want to write the value of my localStorage to the data div i would do this,
document.getElementById("data").innerHtml = localStorage.score;
but I want to write it inside the h2 tag,
So i tried this after searching on Stackoverflow,
document.getElementById("data").getElementsByTagName('h2').innerText = localStorage.score;
and this,
document.getElementById("data").getElementsByTagName('h2').firstChild.nodeValue = localStorage.score;
but both of these are not working.
Why it is not working can anybody tell me ?

First, in order to get the first element, do not use firstChild, rather, use the zero index instead
document.getElementsByTagName('h2')[0]
See How to get a html element by name
firstChild is for nested children, not an array of elements.
Second, use innerHTML like you were for 'content'
document.getElementsByTagName('h2')[0].innerHTML = localStorage.score;
See this fiddle

Based on the code you posted you need to either change the div id from data to content or change call the getElementById with the "data" parameter.
That is, if there is indeed something in localStorage.score to show.

The method getElementsByTagName() returns an array, it accesses all elements with the specified tagname. Use getElementsByTagName('h2')[0] to add value to it.
Like
document.getElementsByTagName('h2')[0].innerHTML = localStorage.score;

Get the div by partial value of id attribute

I have a div in my form
<div id="s2id_s52dcecf43a846_membership">
<div>
I want to find the div by the name "membership" because the other elements of the id are randomly generated.
How to get the div by just getting the partial value of the div id ?
I want to get it via jQuery/Javascript.
Thanks,
FaisalNasir

If the id starts with "membership" and then comes the random part you can use:
$('[id^="membership"])
You can also use "contains" selector, like
$('[id*="membership"])
If you want to search by the name, you can use
$('[name=membership]');
Keep in mind this might give you more than one element.
You can also check more selectors here

just getting the partial value of the div id
Just try the attribute contains selector,
$('[id*="membership"])
Or the better way would be add a common class to those elements
Please read here to know more about Jquery selectors

:contains incorrectly selecting child elements

Currently I'm trying to select a link element with the jQuery :contains selector. This works when the contents of the link is just text. but it seems that when the element contains other HTML elements the :contains selector selects a child element instead. Example
HTML:
<b> two</b> this not bold <b>This</b> is a bold Link
from that html, I'm trying to select the link using this selector
jQuery:
var selector = "a:contains('<b> two</b> this not bold <b>This</b> is a bold Link')";
var returnObj = $(selector);
Instead of getting one returned object (the link), jQuery returns three objects:
the first bold element
the text this is not bold
the second bold element
the problem isn't the single quotes within the contains(), as I've tried with and without them.
This is just a simplified example of what I'm trying to do. In reality, I'm dynamically creating selectors based off of a link object a user clicks. I then store that selector in a database for use later (for my app to display content related to that link). Since I can get the contents of the link, I figured I'd just use a:contents() if the link doesn't have an id.
based off of these pages, I seem to have my syntax right:
http://docs.jquery.com/Tutorials:How_to_Get_Anything_You_Want_2
http://api.jquery.com/contains-selector/
Thoughts on how to get the link object returned? Thanks!
hope this isn't too stupid a question, I'm new to JS and jQuery.

As mentioned, :contains() is meant to select by text content only, not inner HTML.
If you must match the a element based on that text, strip out the <b> tags:
var selector = "a:contains(' two this not bold This is a bold Link')";
Otherwise, see if you can simplify this selection by using a contextual selector (e.g. select based on its surrounding elements, parents, siblings, etc), or assign it a class and select by that class instead.
On a side note, I'd consider this yet another jQuery bug (could be a parsing error in Sizzle). In your situation, :contains() is not supposed to return or create any elements; it's supposed to return no matches simply because the selector doesn't match your a element. I suspect what it's doing instead is treating the <b></b> tags as new elements, and creating them on the fly along with your a element, which is wrong because the tags are inside the argument string and meant to be taken literally...

First of all your selector text does not match the actual text in your html.
The selector includes the this not bold which is not present in the html.
Most importantly the :contains works with the text only.. so you should check for
$("a:contains('two this not bold This is a bold Link')");
It is a very inefficient way though, and you should better add a class to the elements you want to target and use that for targeting..

How to select elements within a variable using jQuery?

I'm trying to make a simple image browser for TinyMCE which I am using in my CMS. As part of this I need to detect whether the user has selected an existing image, so I can display the "edit" form instead of the "choose an image form".
var selected_html = ed.selection.getContent();
var $elem = $(selected_html);
console.log($elem);
The first function returns the user selected text from the editor window as a string of HTML. I then would like to use jQuery (although plain javascript is just ok too) to check if this string contains an img tag before subsequently grabbing the src and title attributes for editing.
Now I've got as far as getting the html to turn into an object. But after this I can't manage to search it for the img element. After reading this (How to manipulate HTML within a jQuery variable?) I tried:
$elem.find('img');
But it just comes out as an "undefined" object...
I think I'm missing something fairly obvious here (it is getting late), but after an hour I still can't figure out how to grab the img tag from the selection. :(
Many thanks in advance.

Because the <img> is at the root of the jQuery object, you need to use .filter() instead of .find().
$elem.filter('img');
The .filter() method looks at the element(s) at the top level of the jQuery object, while .find() looks for elements nested in any of the top level elements.
If you're not sure beforehand where the target element will be, you could place the HTML into a wrapper <div> to search from. That way the HTML given will never be at the top.
var selected_html = ed.selection.getContent();
var $elem = $('<div>').html(selected_html);
var $img = $elem.find('img');

Try to see what is really inside your $elem variable. Just do a console.log($elem) using both Firefox and Firebug and you should be able to manage quite alright! ;)

How to count the number of listitems in an asp.bulletedlist with JavaScript

I have an asp:bulletedlist control, which sits inside a div tag, and I need to count the number of list items inside the control. Searching the internet, and noting the fact the html given back by the items is a list i.e. <li>, I thought I could use an example of:
var listcontrol = document.getElementById('BulletedList1');
var countItems = listcontrol.getElementByTagName('li').length;
However, when I do this, it throws and error saying that no object exists for this control.
So, my problem is, and because I must do this clientside because I want to use this to set the height of the div tag, is how do you count the number of items inside a asp:bulletedlist control with javascript?

You can't use document.getElementById like you are using it because the actual ID for an Asp.Net control when rendered is different than what you set for the ID on the control. View the source of your page and you will see what the actual ID is. You can then use that if you want and this code should work, but it would break if you ever moved the bulletedlist control, since the hierarchy would change.
Another way to do this would be to use jQuery. In your example, you could do this:
$('[id$=BulletedList1]').children('li').size()
This would select the element that ends with 'BulletedList1', gets the li children, and then returns the size of the collection.