Unexpected closing tag of div element-CodePudding

I want to insert a div inside the table element as the following fiddle

Code:

 <table >
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">User</th>
            <th scope="col" >Test</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of filteredItems$ | async; index as i">
            <th scope="row">1</th>
            <td>
            Test
            </td>
            <td>
              <ul  id="timeline">
                <li >
                  <div >
                    <span >Abhi Sharma</span>
                    <span >11/15/2014<span>
                  </div>
                  <div >
                    <h4> Shift Created </h4>
                  </div>
                </li>
                <li >
                  <div >
                    <span >PAM Admin</span>
                    <span >11/15/2014<span>
                  </div>
                  <div >
                    <h4> Email Sent </h4>
                  </div>
                </li>
                <li >
                  <div >
                    <span >Aaron Rodgers</span>
                    <span >11/15/2014<span>
                  </div>
                  <div >
                    <h4> SIC Approval </h4>
                  </div>
                </li>
               
               </ul>      
            </td>
          </tr>
        </tbody>
      </table>

But it is returning an error of unexpected closing tag.

Uncaught Error: Template parse errors: Unexpected closing tag "div". It may happen when the tag has already been closed by another tag.

I can not find why, because all my div are closed, someone knows what am I doing wrong?

CodePudding user response：

You are not closing the span tag in the following line in each of the li's

<span >11/15/2014<span>

it should be (note - you will need to update each of the 3 instances)

<span >11/15/2014</span>

When you see the closing tag error - go through your code to check that all tags have been closed - it may not be the item that was listed in the error... js tries to infer closing tags when they are missing and the one identified may simply be at the end of that guess.