0

I'm still completely new to HTML, Javascript, and jQuery, and I've been trying out how to do this for a really long time now, all answers I've been looking at while searching gave me inadequate or inaccurate results. Or maybe I'm just bad at googling.

Anyways, what I want to do is output to the website "text text link", where link is a href link and text is just regular text. What I have is

jQuery

$('#text').html("text text ");
$('#link').html('link');
$('#link').attr('href', 'http://something.com/');

HTML

<div id = "text"><a id = "link"></a></div>

My problem is that inside the HTML, <a id = "link"> is not being detected.

EDIT: prepend() prepends to my string more than once, how do I stop this from happening?

dtgee
  • 1,272
  • 2
  • 15
  • 30
  • 1
    Please look in the [JavaScript error console](http://www.netmagazine.com/tutorials/javascript-debugging-beginners) and tell what errors you see there and which lines they point to. Also check that you don't have any other elements that have the same ids. – JJJ Aug 06 '13 at 17:27
  • 1
    ***NEVER*** put spaces in your attributes declaration: `` – Jeff Noel Aug 06 '13 at 17:28
  • 1
    May be because you replaced ` – Optimus Prime Aug 06 '13 at 17:29
  • 1
    Also, that code won't work even if the selectors matched: the first line will replace the div's contents with "text text ", removing the `` tag while it's doing it. – JJJ Aug 06 '13 at 17:29
  • 1
    @JeffNoel Do you have a reason? Other than it's unnecessary (and probably ugly/disliked by others), there's nothing wrong with it http://stackoverflow.com/questions/7064095/spaces-between-html-attributes-and-values – Ian Aug 06 '13 at 17:30
  • @Ian As stated in the answer of the question you linked, it adds up to the pagesize considerably if you do that for each attribute and tag (and if you only do it for some of them, it's called inconsistency and it's a bad habit). I would also say it could be called an unofficial, unwritten *convention* that **most** programmers tend to respect. It enhances readability of your code when there isn't 50 blank spaces dancing in your face. ***NOTE:*** This is my opinion on the subject. – Jeff Noel Aug 06 '13 at 17:37
  • @JeffNoel I think that's an awesome explanation, I just wanted the OP/others to know that :) I stick to no extra spaces and agree completely, I just think the OP and others shouldn't blindly follow suggestions, but you've clearly provided reasoning! – Ian Aug 06 '13 at 17:51
  • 1
    @Ian I am totally okay with your question! If every user in this community would ask for explanation like you do, we would all become geniuses. (Now let's not start a conversation otherwise that might get deleted). – Jeff Noel Aug 06 '13 at 18:02

1 Answers1

3

Try

$('#text').prepend("text text ");
$('#link').html('link');
$('#link').attr('href', 'http://something.com/');

jsFiddle example

In your example, the first .html() function is overwriting the contents of the div, removing the link.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • [`.prepend()`](http://api.jquery.com/prepend/) : *Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.* Good job there man. – Jeff Noel Aug 06 '13 at 17:30
  • 1
    Thank you! That worked wonderfully and your explanation is perfect! – dtgee Aug 06 '13 at 17:31
  • 2
    I know it's just an example, but combining things, you could use http://jsfiddle.net/5QGUr/ – Ian Aug 06 '13 at 17:31
  • Hmm actually I have a problem with this solution now.. Since I do something multiple times, the result would be "text text text text link" How do I stop it from prepending too many times? – dtgee Aug 06 '13 at 17:51
  • @dtgee Do the prepend outside of the function that is called multiple times. – Jeff Noel Aug 06 '13 at 18:01
  • Does the link have to be inside the `div`? You could use the same code as you gave in the beginning, but just have the `a` tag outside the `div` and it should work fine (`
    `)     – Steven Lambert Aug 06 '13 at 19:43