javascript set weight to characters in text

Question

I want to apply text "<b>H</b>ell<b>o</b>" to the paragraph with id="predogled" using javascript, so the output will be Hello.

I tried with this:

<script>
    function formattext(){
        document.getElementById('predogled').innerText="<b>H</b>ell<b>o</b>";
    }
</script>

<p id="predogled"></p>

<button type="button" onclick="formattext()">Format!</button>

But this code literally print "<b>H</b>ell<b>o</b>" and the characters are not bold as I want.

Answer 1

That's what innerText does. If you want it to be interpreted as HTML, use innerHTML instead.

Answer 2

you have to use innerHTML

<script>
    function formattext(){
        document.getElementById('predogled').innerHTML="<b>H</b>ell<b>o</b>";
    }
</script>

<p id="predogled"></p>

<button type="button" onclick="formattext()">Format!</button>

Answer 3

With innerText you print a string.
With innerHTML you print the HTML content of the elements.
Try using innerHTML besides innerText:

function formattext(){
        document.getElementById('predogled').innerHTML="<b>H</b>ell<b>o</b>";
    }