CODEWITHSUNDEEP
javascriptjquerydom
BSG
BSG

Reputation: 1452

Add anchor point to headers?

I have a really big html-document consisting of a number of <h4> headers accompanied by a short <p> 'body'.

I need to add an anchor point (is it the correct term, btw?) to each of the headers.

I'm iterating over the headers, and adding them to a menu-ul:

headz = document.getElementsByTagName("h4");
arrayOfHeaders=[];

x = 0;
y = headz.length;

$("#menu").html("<ul>")
while (x<y){   
    arrayOfHeaders[x] = "<li><a href='#" + x +"'>" + headz[x].innerText + "</a></li>";
    $("#menu").append(arrayOfHeaders[x])
    x++;
}
$("#menu").append("</ul>")

I need a way to attach the anchor points to the headers.

Edit: To clarify - what i need is the add a name-tag to each of the -elements. The first header should be edited from '<h4>' header'</h4>' to '<h4 name="0">'...

Without editing the html, of course.

Upvotes: 1

Views: 297

Answers (5)

epascarello
epascarello

Reputation: 207527

Set ids to the if they do not have one.

headz = document.getElementsByTagName("h4");
arrayOfHeaders=[];

x = 0;
y = headz.length;

var str = "<ul>";
while (x<y){
    var elem = headz[x];
    var id = elem.id || "heading_" + x;
    elem.id = id;
    str += "<li><a href='#" + id +"'>" + elem.innerText + "</a></li>";
    x++;
}
$("#menu").append( str + "</ul>");

and FYI innerText is not cross browser friendly.

jQuery solution

var str = "<ul>";
$("h4").each(
    function(i){
        var id = this.id || "header_" + i;
        this.id=id;
        str += '<li><a href="#' + id + '">' + this.innerHTML + '</a></li>';
    } 
);
str += "</ul>";
$("#menu").append(str);

Upvotes: 2

rissicay
rissicay

Reputation: 405

Since you used jquery already, thought id write it all in it:

var html = '<ul>';

$('h4').each(function (index, header) {
    html += '<li><a href="#' + header.id +'">' + header.html() + '</a></li>'; 
});

html += '</ul>';

$('#menu').append(html);

Upvotes: 1

Kenn
Kenn

Reputation: 2769

I think the concept you refer to is sometimes known as an "internal link" - see here under the second section "HTML Links - The id Attribute".

Now looking at your example code you are clearly using jQuery so why not make the most of it? 

$("h4").each(function() {
   $("#links").append("<a href='#" + this.id + "'>link to " + this.id + "</a><br /><br />");
});

See the following fiddle - http://jsfiddle.net/r0k3t/PhrB6/

Hope that helps.

Upvotes: 0

Mladen
Mladen

Reputation: 1245

This one is similar to rissicay's answer but I think it's more concise:

var html = []; // create an empty array to store iterated html in
// loop over every heading... 
$('h4').each(function(index) {
  // and add it to array previously created
  html.push("<li><a href='#" + index +"'>" + $(this).html() + "</a></li>");
  // add name attribute to heading
  $(this).attr('name', index);
});
// finally, append all to menu together with unordered list
$('#menu').append('<ul>' + html.join() + '</ul>');

Basically, try to minimize dom manipulation (.append(), .prepend(), .html()) as much as possible

Upvotes: 0

Anoop
Anoop

Reputation: 23208

This might solve your problem

headz = document.getElementsByTagName("h4");
arrayOfHeaders=[];

x = 0;
y = headz.length;

var html = "<ul>";
while (x<y){   
   html  += "<li><a href='#" + headz[x].id +"'>" + headz[x].innerText + "</a></li>";       
    x++;
}
$("#meny").append( html + "</ul>")

Upvotes: 0

Related Questions