How to style a text string that is added by using a JavaScript function?

Question

The link below is supposed to reveal more text when clicked, which it does, however the text uses all default styling, which cannot be seen on my black background that I use for the page. I have tried to style the tag where the text is added through JavaScript, but the added text still uses the default style.

Below is the code I have used: HTML:

<p>


    This movie might seem boring to you at first and you 
      might not get it after <br>first time viewing, like I did. But this 
    is one of the greatest movies ever made.....
        <a  href="#" onClick="more(event)">Read More</a>
    <p id="atext" class="atext">dqdas</p>
        <script src="Home.js"></script>
    </p>

and JavaScript:

function more(e) {
    e.preventDefault();
document.getElementById("atext").style.color= "white";
document.getElementById("atext").outerHTML = 'It touches many issues in our lives and packs a hell of a plot twist';

}

Unless necessary, it’s advisable to use innerText instead of outerHTML — AlexH
– AlexH, Commented Oct 11, 2019 at 22:18
@AlexH This solves my issue, as now all of my style is reflected in the added text. Thank you very much! — Dante
– Dante, Commented Oct 11, 2019 at 22:25
Great to hear. Please accept my answer to signify to the community that this problem has a solution. This allows others with the same problem to more easily find a fix. @Dante — AlexH
– AlexH, Commented Oct 11, 2019 at 22:26
@AlexH you made a comment, I cannot accept a comment on this site. It must be a question. If you make the answer with the same commend, I will label it as a solution. — Dante
– Dante, Commented Oct 11, 2019 at 22:49

AlexH · Accepted Answer · 2019-10-11 22:53:09Z

1

Simply use innerText rather then outerHTML. This should solve the issue.

I believe this happens because setting the HTML of an element overwrites any styles it may have. Setting the text does not do this.

Also, it is generally best to use innerText when necessary, as it reduces the risk of errors like yours occurring.

edited Oct 11, 2019 at 22:53

answered Oct 11, 2019 at 22:25

AlexH

8668 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to style a text string that is added by using a JavaScript function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related