Changing innerhtml value produces a blank line

Question

I have a toggle link to show or hide a table. This is the code for the link. When this is shown there is no blank line between the link and the table underneath

<a id='togglelink' name='togglelink' href='javascript:ToggleTable();' title='Show Inactive EDB Appointments' >
    <p style='text-align:center'>Show Inactive EDB Appointments
</a>

When the link is clicked a table is shows and I change the link text

link.innerHTML = "<P style='TEXT-ALIGN: center'>Hide Inactive EDB Appointments";

After this code is executed a blank line appears between the link and the table underneath

Maybe it is because your HTML is invalid. You need to close the `
` tag. — putvande, Jun 25 '15 at 14:48
Maybe try closing the `
` ? That's all I can see wrong since you didn't post all of the javascript — Spencer May, Jun 25 '15 at 14:48
[You don't need to close the `
` tag guys.](http://stackoverflow.com/questions/8460993/p-end-tag-p-is-not-needed-in-html) — , Jun 25 '15 at 14:49
block `
` inside inline `` is a really bad practice, also, your `
` tag is never closed, then inline css shoul be avoided as soon as possible — Magicprog.fr, Jun 25 '15 at 14:50
Close the
tag. Also, using href="javascript: [js code] " does not work in some browsers. It's better to use an onclick attribute. — sqsinger, Jun 25 '15 at 14:51
Testing in FireFox without the closing duplicates the text, and generally messes up the HTML, so I would recommend closing off the — Ash, Jun 25 '15 at 14:58

score 0 · Answer 1 · answered Jun 25 '15 at 14:53

0

You forgot to close the <p> tag.

link.innerHTML = "<p style='text-align: center'>Hide Inactive EDB Appointments</p>";

answered Jun 25 '15 at 14:53

alexandreferris

662
1
11
29

score 0 · Accepted Answer · answered Jun 25 '15 at 15:01

Close off the paragraph tag within the HTML and the JavaScript.

<a id='togglelink' name='togglelink' href='javascript:ToggleTable();' title='Show Inactive EDB Appointments' >
    <p style='text-align:center'>Show Inactive EDB Appointments</p>
</a>

link.innerHTML = "<p style='text-align: center'>Hide Inactive EDB Appointments</p>";

score 0 · Answer 3 · answered Jun 25 '15 at 15:09

Instead of using href="javascript: [some code]", which does not work in all browsers, you should use an onclick attribute as below and demo'd in this fiddle

<a id='togglelink' name='togglelink' href='#' title='Show Inactive EDB Appointments' onclick="ToggleTable();">
     <p style='text-align:center'>Show Inactive EDB Appointments
     </p><!-- Added in closing tag -->
</a>

Notes:

I made sure to close the <p> tag, though this was not the problem.
I've provided an example ToggleTable() function that guesses at how you initialize var link. I'd recommend document.getElementById('togglelink') or $('#togglelink') if using jQuery.
An alternative to the onclick attribute, as commented in the fiddle, is an event listener. Example below, if using jQuery:

function ToggleTable() {
    var link = document.getElementById("togglelink");
    link.innerHTML = "<P style='TEXT-ALIGN: center'>Hide Inactive EDB Appointments</p>";
}

$(document).on("click tap","#togglelink",function() {
    ToggleTable();
});

Changing innerhtml value produces a blank line

3 Answers3

Notes: