The innerHTML function is providing plain text instead of HTML content

I am currently working on an application in AngularJS and I have a function that removes #(hashes) and turns them into links.

$scope.getAllHashes = function(event){

    var x = event;
    var collect = '';
    var link = '';

    for (i = 0; x.length > i; i++) { 

        //remove #
        link = x[i].substr(1);

        collect += "<a href='#/search/" + link + "'>" + x[i] + "</a> ";

    }
    return document.getElementsByClassName('hashes').innerHTML = collect;
};

Instead of displaying as links:

<a href='#/search/aaa'>#aaa</a> <a href='#/search/bbb'>#bbb</a> <a href='#/search/cccc'>#cccc</a>

It is showing as text:

#aaa #bbb #ccc

The data comes from this array:

$scope.events = 
[
    {

            id: 1,
            datetime: 'FRI, 6 NOV 10:00 AM',
            title: 'Event Title goes here - lalelalela',
            address: {
                road: '650 Address Rd',
                city: 'Toronto',
                state: 'Ontario',
                postal: 'A1B1C3',
                country: 'CA'
            },
            hashes: ['#aaa','#bbb','#cccc']

    }, .....

This is the section of code from the HTML source:

<span class="hashes ng-binding">
            &lt;a href='#/search/aaa'&gt;#aaa&lt;/a&gt; &lt;a href='#/search/bbb'&gt;#bbb&lt;/a&gt; &lt;a href='#/search/cccc'&gt;#cccc&lt;/a&gt; 
</span>

I am unsure why it is not displaying as HTML elements.

javascriptangularjstextinnerhtml

Answer №1

To display HTML content in your AngularJS application, make use of ng-bind-html directive.

<p ng-bind-html="getHashes({ data: eventObject.hashes })"></p>

Ensure that you have included the ngSanitize dependency in your project setup. Refer to the documentation here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Paper.js to access and manipulate document.body.style.opacity within a paperscript

My website is essentially one large canvas image. Currently, the body fades in when loaded using this code: <body onLoad="document.body.style.opacity='1'"> However, I want to initiate this fade within my paperscript because sometimes the ...

javascriptcsshtmlpaperjs

Designing an Angular ui-router feature: Implementing a dynamic navbar that seamlessly integrates into all primary states as well as their sub-states

I am facing a challenge with my website's navbar. I want it to be displayed on most pages, but not all of them. I tried using ui-view to load it only for specific pages, but I have hit a roadblock. My goal is to connect the navbar to main states such ...

angularjsangular-ui-router

Conceal the name of a property when displaying it

I have a function that retrieves data from an interface, which includes a property called name. Currently, the output includes the property name, but I would like to remove it if possible. How can I achieve this? Here is the interface structure: export i ...

javascriptnode.jstypescriptapi

When using Vue.js, the v-bind:class directive can be applied when an array is present and contains a specific

In my current project with Laravel and Vue.js, I am dealing with the task of creating multiple users. To accomplish this, I am constructing an array of users and populating all the necessary fields in order to store them in a database table. Once all field ...

javascriptvue.js

What is the best way to seamlessly move an element from a margin-left position of -9999px back onto the page?

Here are some additional details - because of unusual restrictions with the YouTube API, I have to push a container off the page in order to create the illusion that the container is hidden. I accomplish this using the following CSS class: .my_hide{ ...

javascriptjquerycss

Form Validation Using a Separate Function

Currently, I am utilizing the jQuery Validation plugin from http://jqueryvalidation.org/ to validate my forms. By default, the validation process is triggered when the form is submitted. However, I would like to initiate the validation when a specific func ...

javascriptphpjqueryformsvalidation

Issue with triggering the .click event

Just starting out with jQuery and Javascript, and I'm having trouble getting this to work smoothly without repeating myself. I have multiple div IDs on a page that I want to display or hide based on the step number in the sequence when a user clicks ...

javascriptjquery

Managing Session Cookies in ExpressJS

Hey there! I've been dealing with a problem while using Express-Session to manage my server-side sessions. When I set user data to session variables in one file, it works perfectly. However, when I try to access those variables in another file, all I ...

javascriptnode.jsexpresscookies

Transferring user input data from Angular 2 to Slim PHP endpoint

Help needed with parsing form-data in Slim PHP. How can I put form-data into an array in Slim PHP? I have tried different methods but the data always gets kicked out in one array with no specific way to target the form data. Any suggestions would be helpf ...

javascriptphpangularjsjsonslim

Setting up the global configuration for Parsley.js Would you like to learn

I have been struggling to find helpful documentation, as it either seems outdated or I just can't seem to get it right. $.fn.parsley.defaults = {} // not working window.parsley.defaults = {} // not working window.ParsleyConfig = {} // not working My ...

javascriptjqueryparsley.jsparsley

Interactive Button Animation using Three.js

After importing a Mesh element into three.js from an fbx file, I am looking to enhance it with an effect similar to that of a clickable button. I am aiming to achieve the same pushable button effect as demonstrated in the first button style found on http ...

javascriptthree.js

What is the best way to showcase the outcomes of arithmetic calculations on my calculator?

In the midst of creating a calculator, I have encountered some issues in getting it to display the correct result. Despite successfully storing the numbers clicked into separate variables, I am struggling with showing the accurate calculation outcome. l ...

javascripttypescript

What are some ways in which I can utilize the Ember Handlebars helper?

Similar Question: Using logical operators in a Handlebars.js {{#if}} statement Below is the code snippet provided: {{#each dataArray}} <li>{{#isTrue idVal1 idVal2}} display some text1 {{else}} display some text2 {{/isTrue}} & ...

javascripthtmlember.jshandlebars.js

Setting up a function in React to utilize an image stored in state

I have a function in my react component for image classification that retrieves the image from the img tag using document.getElementById: const img = document.getElementById('animal_image');. The image uploaded via the file input updates the sta ...

javascriptreactjstensorflow2.0filereader

Having trouble with the initial tap not being recognized on your mobile browser?

When using mobile web browsers (specifically chrome and firefox on iOS), I am experiencing an issue where the hamburger menu does not trigger when tapped for the first time. For a simplified version of the HTML/CSS/JS code, you can check it out at: https ...

javascripthtmlcssmobile

Using Node.js to extract information from a web application that necessitates logging in

I find myself in a situation where I need to gather data from a webpage that does not have an API available. The scenario is as follows: In order to access the page data, one must first log in (usually resulting in the creation of session storage/cook ...

javascriptnode.js

What is the best way to retrieve $_SESSION variables following an Ajax request?

My website has a login feature where users can enter their credentials and the login request is sent using jQuery's $.ajax to a processing page. During the login attempt, any errors that occur are collected and stored in $_SESSION['error']. ...

javascriptphpjqueryajaxsession

Examining an array to identify palindromes

Is there a way to loop through an array and check if each word is a palindrome, instead of manually passing an argument for each word? If a word is a palindrome, return the word; otherwise, return 0. var myArray = ['viicc', 'cecarar', ...

javascriptarrayspalindrome

Is there a way to display an Alert message without the need to click a button in a React Native application?

Is there a way to display an alert message without the need for a button in my react native app? I want the alert to automatically pop up as soon as I visit a specific page. Your assistance is greatly appreciated. import React, { useEffect, useState } fr ...

javascriptreactjsreact-nativealert

Guide to running code repeatedly in node.js

Is there a way to repeat the console.log function 5 times in Node.js using the 'repeating' npm package? I am working on a node application that needs to run a specific code multiple times, but I can't seem to figure out how to achieve this. ...

javascriptnode.jsnpm