Can I nest <button> inside of <a> [duplicate]

Question

I want to nest a button that performs an Ajax action that is between <a> tags.

The whole container should act as a link to a separate webpage while the "favorite" button will perform an unrelated Ajax action. Unfortunately, this is not able to be done because <button> cannot be nested inside an <a> tag.

Is there a simple workaround to achieve to this effect?

Current code:

<a class="button7" onmouseover="displayFavorite('000')" onmouseout="hideFavorite('000')" href="http://www.example.com">
    Math 141
    <button id='000' class="button8" onclick="favorite('000')">Favorite</button>
    <ul>
        <li><strong>Description</strong> Calculus 1 and Calulus 2</li>
        <li><strong>Instructor</strong> Boon Ong</li>
        <li><strong>Documents</strong> 17</li>
    </ul>
</a>

EDIT: Please note, the AJAX was just additional information, its not related to the question.

Answer 1

Something like this:

<div class="container">
    <a class="button7" href="http://google.co.uk" onmouseover="displayFavorite('000')" onmouseout="hideFavorite('000')">
        Math 141
    
        <ul>
            <li><strong>Description</strong> Calculus 1 and Calulus 2</li>
            <li><strong>Instructor</strong> Boon Ong</li>
            <li><strong>Documents</strong> 17</li>
        </ul>
    </a>
    <button id='000' class="button8" onclick="favorite('000')">Favorite</button>
</div>

CSS:

.container {
    position:relative;
    width:400px;
}
.button7 {
    width:100%;
    height:auto;
    display:block;
    background:red;
}
.button8 {
    position:absolute;
    top:5px;
    right:5px;
}

Positioning an element absolutely in a parent container with position:relative; enables you to use the css properties top, left, right, and bottom relative to the container that encloses it.

Setting the <a> (with class .button7) to display:block; means that the hyperlink will act as a block level element and take up the entire "block" (i.e. space afforded to it by its parent)

http://jsfiddle.net/t29m4/