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

swapping out an external CSS file in React for a new CSS file

Tips on extracting the image URL after uploading via Google Picker

Why is it that the date selector is missing in Firefox?

Incorporating a Bootstrap form within a form group

Angular - CSS Grid - Positioning columns based on their index values

Cannot access Nextjs Query Parameters props within the componentDidMount() lifecycle method

What is the best way to choose the final XHTML <span> tag with a specific class using XPath?

In JavaScript, you can use the document.cookie property to delete specific cookie values identified by their names and values

Struggling with implementing jquery Ajax and a php script to fetch information from a mysql database

Does adjusting the background transparency in IE8 for a TD result in border removal?

What are the steps for displaying multiple input fields using the onchange method?

Implementing dynamic content updating in WordPress by passing variables and utilizing AJAX

What is the process for refreshing HTML elements that have been generated using information from a CSV document?

Sort various divs using a list

Returning Props in Dynamic Components with Vue 3

The process of making a pop-up modal instead of just relying on alerts

JavaScript code can be enhanced with HTML comments to improve readability

The text color is being influenced by the transparent background behind it

When the cursor is placed over it, a new div is layered on top of an existing

Unique twist on the Bootstrap grid: perfectly centered