Jump to content

Javascript For Innerhtml/append


Recommended Posts

As you can see, I'm trying to add this:

<a name="Example" onmouseover="Tip('Example')" onmouseout="UnTip()">[?]</a>

to the page for each LI that has Element Search inside it.The page this is on is unfortunately not my property so I cannot post it, but here is an idea of what the <li> tags look like:

<li><a href="example.aspx">Example</a></li>

Each LI is generated depending on user preferences, so I cannot code them as I had planned. I cannot alter the pulling data, only add functions after the data is loaded. Which is why I'm trying to use JS instead of just altering the DB pull code to incorporate the 'name' tag. Each LI DOES have a unique link, if that matters.Here is what I have, and it doesn't work one bit :)

var items = gid('sideMenu').getElementsByTagName("li");for(var i=0;i<items.length;i++){	if(items[i].innerHTML == "Element Search"){		var somehtml = document.write("<a name=\"Example\" onmouseover=\"Tip('Example')\" onmouseout=\"UnTip()\">[?]</a>");		items[i].appendChild(somehtml);	}}

I'm not looking for anyone to make the code, mainly looking for pointers. Maybe there is a better JS command to use? Or you know a great example I can look at.Need any further data, just ask.Thanks in advance.

Link to post
Share on other sites

document.write is NOT the way to go. You can use appendChild if you like, but only after you create an element. document.write doesn't do that.But it'll be simpler just to set the innerHTML of the <li> elements to the code that is currently in your document.write argument.I'm wondering about your conditional. Before your function runs, what exactly does each <li> look like. Is it this:<li><a href="example.aspx">Example</a></li>or this:<li>Element Search</li>

Link to post
Share on other sites
<li><a href="example.aspx">Element Search</a></li>

I'm adding the [?] at the end(separate href) since it generates a "tooltip" when hovered over.I've found users generally like the option of hovering over the [?] for the tooltip, instead of having it show EVERY time they hover over the main Example link.

Link to post
Share on other sites
<li><a href="example.aspx">Element Search</a></li>

Okay. If this is the way the <li> elements look before you change them, then this won't work:if(items.innerHTML == "Element Search")because part of the innerHTML is the <a> element. But this small change should work:if(items.innerHTML.indexOf("Element Search") > -1)since all it does it test whether the innerHTML contains the string

Link to post
Share on other sites

I think that you need to use the functions on the document object. I am referring to document.createElement() and document.createTextNode(). I wrote a blog post about it but if you want to start from there and mull over it you could do that.If the blog post is not on target you can provide me with more data here.http://technage.blogspot.com/Peace

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...