Creating a bold portion of a string

Question

Creating a bold portion of a string

My task involves dynamically creating <p> elements within a div based on the contents of my codeArray, which can vary in size each time. Instead of hard-coding these elements, I have devised the following method:

  for(i=1;i<codeArray.length;i++){
    if(factArray[i] != 0){
      let para = document.createElement('p');
      let node = document.createTextNode(codeArray[i] + " = " + factArray[i]);
      para.appendChild(node);

      let element = document.getElementById('leftModal');
      element.appendChild(para);
    }
  }

One challenge I am facing is how to make the first part of the string (before '=') appear bold while keeping the second part (factArray[i]) in normal font weight. Is there a solution for achieving this formatting?

javascript html css string

Answer 1

Answer №1

To make text bold, simply wrap the desired text within a b element. B elements are typically used for bolding text in default browser stylesheets.

  for (i = 1; i < codeArray.length; i++) {
    if (factArray[i] != 0) {
      let para = document.createElement('p');
      let bold = document.createElement('b');
      let boldNode = document.createTextNode(codeArray[i]);
      bold.appendChild(boldNode);
      para.appendChild(bold);
      let node = document.createTextNode(" = " + factArray[i]);
      para.appendChild(node);

      let element = document.getElementById('leftModal');
      element.appendChild(para);
    }
  }

Answer 2

To make text bold, simply wrap the desired text within a b element. B elements are typically used for bolding text in default browser stylesheets.

  for (i = 1; i < codeArray.length; i++) {
    if (factArray[i] != 0) {
      let para = document.createElement('p');
      let bold = document.createElement('b');
      let boldNode = document.createTextNode(codeArray[i]);
      bold.appendChild(boldNode);
      para.appendChild(bold);
      let node = document.createTextNode(" = " + factArray[i]);
      para.appendChild(node);

      let element = document.getElementById('leftModal');
      element.appendChild(para);
    }
  }

Creating a bold portion of a string

Answer №1

Similar questions

I can't seem to get the Font Awesome icons to display properly. What could be the issue?

Setting a default value in an arrow function

When attempting to delete a resource using an HTTP request in Insomnia, I encountered a TypeError stating that it was unable to read the property 'id'

How do I add a new item to an object using Ionic 2?

Slideshow: I hope the Radio Button triggers the appearance of the next item in the rotation

Checkbox search column in jQuery DataTables

Anchoring links on a webpage that provide users with a clear indication of their current position within the page

The parent component is failing to pass the form values to the child form group in CVA

Several different forms are present on a single page, and the goal is to submit all of the data at

Items within a shared container are currently displaying stacked on top of each other

What is the best method for targeting the clicked element using its class name?

Using TypeScript and Angular to modify CSS properties

Exploring the concept of next middle-ware within the realm of Express.js and Sail.js controllers

Looking for a way to sort through data using the current time as a filter

Sharing data between controllers using factory in AngularJS is not supported

Can we expect Karma to receive updates for upcoming versions of Angular and Jasmine?

Switch between showing and hiding a div by clicking on the panel header and changing the symbol from + to

There appears to be an issue where the session object cannot be retrieved by the Struts2 action

Generating ChartJS in Real-time

The NEXT_LOCALE cookie seems to be getting overlooked. Is there a mistake on my end?