Html element is null in MVC View

I've started work on my first mvc project and also using jquery for the first time. Some bheaviour I have encountered has me stumped. I have a master page with the following structure;

    <div id="main">
        <div class="clsLeftPane">
            <% Html.RenderPartial("SubMenu"); %>
        </div>
        <div class="clsRightPane">
            <div class="clsBody">
                <% Html.RenderPartial("TalentSelection"); %>
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>  
        </div> 
    </div>

I have a partial view (control) with a drop down list (TalentSelection) and upon selection change in dropdown an event is fired

I then have a view (default) called TalentOverview which listens for the event fired;

    $(document).bind('talentChanged_Event', function (event, data) { HandleEvent(data); });


function HandleEvent (data) {
    lblTalentAwareness.innerHTML = data.Awareness;

    var perfAttr = [{"<Caption>k__BackingField":"Interesting","<QuestionId>k__BackingField":8,"<Score>k__BackingField":64.00},{"<Caption>k__BackingField":"Similar to me and my friends","<QuestionId>k__BackingField":13,"<Score>k__BackingField":55.00},{"<Caption>k__BackingField":"Attractiveness","<QuestionId>k__BackingField":11,"<Score>k__BackingField":54.00}]

    jQuery.each(perfAttr, function(i, val) {
        CreateItem(val[i]);
    });
}

function CreateItem(name) {
    var listItem = document.createElement('li');
    listItem.setAttribute('id', 'listitem');
    listItem.innerHTML = 'item';

    highAttrs.appendChild(listItem);
}

</script>
<button id="btnClick" onclick="CreateItem('item')"></button>
<h1><%: ViewData["Message"] %></h1>
<p>
    <asp:Label ID="lblAwareness" runat="server" Text="Awareness  "/>
    <label id="lblTalentAwareness"/>
</p> 
<h4>High Performing Attributes</h4>
<ul id="highAttrs">
    <li>test</li>
</ul>

When the event is fired TalentOverview calls a function called HandleEvent and adds some items (li) to a list (ul). (Please note certain values are hardcoded in order to help testing)

Now the problem is that everytime the event is fired the code errors claiming that 'highAttrs' is null. However, whilst investigating I also created a button that calls the same function upon the click event and this runs fine without any errors.

I'm confused as to why i'm getting different behaviour. Have I misunderstood something fundamental here. I woould have assumed my page elements to be rendered once when user enters the page and after that all events will be handled by JQuery.