javascript - Cannot get the HTML value of a dd element with jQuery -

please help, cannot html value of dd element.

this code:

<table id="tabla_costo">     <h2>        costo de producción     </h2>     <dl>         <dt>codigo></dt>         <dd class="code">             &nbsp;         </dd>         <dt>codigo secundario></dt>         <dd class="code2">             &nbsp;         </dd>         <dt>producto</dt>         <dd class="name">             &nbsp;         </dd>         <dt>cantidad</dt>         <dd class="quantity">             &nbsp;         </dd>         <dt>costo</dt>         <dd class="cost">             &nbsp;         </dd>     </dl> </table> 

i've tried this, not work:

var dl = $('#tabla_costo dl').find('dd.code').first().html(); console.log(dl); 

but i'm getting undefined

this jsfiddle:

https://jsfiddle.net/n96fvaoe/3/ (updated)

this because <table> has no rows or cells, it's not valid dom structure.

if change <table> content in cell:

<table id="tabla_costo"> <tr><td> ...content... </td></tr> </table> 

it works fine.