0

I am using SP 2016 and I'm trying to do DOM injection right below our global navigation bar. Using the code I created, my <li> shows blanks and I'm not sure why. It's probably the way my javascript is set-up. Any ideas would be much appreciated.

<div id="mainNav">  
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</div>

<script type="text/javascript">
let myMockListData = [
    {
        href: "/training/BirtsNoAccess/SitePages/Home.aspx",
        navItem: "siteA"
    },
    {
        href: "/training/BirtsNoAccess/SitePages/Home.aspx",
        navItem: "siteB"
    },
    {
        href: "/training/BirtsNoAccess/SitePages/Home.aspx",
        navItem: "siteC"
    },
    { href: "/training/BirtsNoAccess/SitePages/Home.aspx", navItem: "siteD" },
    { href: "/training/BirtsNoAccess/SitePages/Home.aspx", navItem: "siteE" }
];

var mainUl = document.getElementById("mainNav");
//create ul
let navUl = document.createElement("ul");
myMockListData.forEach(function(listData){
    //create element
    var navLi = document.createElement("li");

    var navA = document.createElement("a");
    navA.href = listData.href;
    navA.innterText = listData.navItem;
    navLi.appendChild(navA);
    navUl.appendChild(navLi);
});
<script/>

Here's the pen.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.