'Can I inject br tag into string and make it work as an actual HTML tag?

const filterThroughItems = ((_siteNavItems) => {
        let siteNavItems = _siteNavItems;
        var n = _siteNavItems[0].links.length;
        const x = 0, y = 20;

        for (var i = 0; i < n; i++) {
          var cut = _siteNavItems[0].links[i].name;
          var sizeOfString = _siteNavItems[0].links[i].name.length;

          if (sizeOfString > 20) {
            cut = cut.slice(x, y) + '<br/>' + cut.slice(y);
            _siteNavItems[0].links[i].name = cut;
          } 
        }
        siteNavItems = _siteNavItems;
        return siteNavItems;
    })

so basically I filter through the Navigation bar and cut the string after first 20chars and want to enter a html <br/> (also tried \n and \r\n) inbetween it, so it splits the text into two lines.

<div name="A.01. Test string as<br/>ów test test test" class="ms-Nav-compositeLink is-expanded is-selected compositeLink-177">

<button class="ms-Nav-chevronButton chevronButton-195" aria-label="A.01. Test string as<br/>ów test test test" aria-expanded="true" tabindex="0"><i data-icon-name="ChevronDown" role="presentation" aria-hidden="true" class="ms-Nav-chevron chevronIcon-215"></i></button>

<a class="ms-Button ms-Button--action ms-Button--command ms-Nav-link link-210" href="/sites/WIN/SitePages/A1Test.aspx" title="A.01. Test string as<br/>ów test test test" data-is-focusable="true">

<div class="ms-Button-flexContainer flexContainer-200">

<div class="ms-Nav-linkText linkText-176">A.01. Test string as&lt;br/&gt;ów test test test</div></div></a></div>

I tried to also work with the DOM but the actuall ClassName changes from linkText-176 incrementally.

My issue is that it DOES insert the br, but as a plain string and not as actual HTML. Any ideas how I can achieve that?

javascripthtmlsharepoint


Solution 1:[1]

You can set the inner HTML of an element:

document.getElementById("myElement").innerHTML = `<h1>Hello <br>Friend!</h1>`;

Solution 2:[2]

You can try following code to insert html.

$("#div1").html("<your HTML>");
<div id="div1"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amila Senadheera
Solution 2 RaytheonXie-MSFT

Related Questions