The HTML code to wrap text in HTML bold tags can be generated using JavaScript.
MyHTML = MyText.bold();Important Note
The bold method is not standardized and may not behave consistently in all browsers.
It should be avoided if possible, and CSS should be used instead. An example using CSS is provided here.
Here is a different example that demonstrates the most common way to bold text, which uses HTML and CSS.
JavaScript String bold Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>JavaScript String Bold Method Demonstration</title>
</head>
<body>
<h1>An Example of How To Generate HTML With Bold Tags Using the JavaScript Bold Method</h1>
<div id="demo"></div>
<script>
var MyText = "Example of an alternative way to generate bold text with HTML in JavaScript.";
var MyHTML = MyText.bold();
document.getElementById("demo").innerHTML = MyHTML;
</script>
</body>
</html>The code above produces a blank HTML document with the following HTML:
<b>Example of an alternative way to generate bold text with HTML in JavaScript.</b>Alternative to Using the Bold Method using CSS
Even though the most commonly used browsers treat the bold method consistently, it’s still better to avoid potential issues by creating the needed HTML code inside a string and then inserting that HTML into the DOM.
Setting the font-weight CSS property to a weight of 700 will make the text appear bold and other values should be avoided as a character set may not exist for that corresponding font-weight.
Rather than including the CSS as an inline style, this example creates a style and then injects it into the document’s header through the DOM.
Example JavaScript Bold Method Alternative:
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>JavaScript String Bolding Text Using CSS Demonstration</title>
</head>
<body>
<h1>An Alternative Way to Bold Text Using JavaScript and CSS</h1>
<div id="demo"></div>
<script>
var MyText = "Example of an alternative way to generate bold text with HTML in JavaScript.";
var MyStyle = "<style>.bold-text{font-weight:700;}</style>";
var MyHTML = "<span class=\"bold-text\">" + MyText + "</span>";
document.head.innerHTML += MyStyle;
document.getElementById("demo").innerHTML = MyHTML;
</script>
</body>
</html>Which will create the following HTML:
<span class="bold-text">Example of an alternative way to generate bold text with HTML in JavaScript.</span>The example will also insert the following CSS style into the document’s header:
<style>.bold-text{font-weight:700;}</style>Pure CSS and HTML Example to Bold Text
In most cases, there is no reason to use any JavaScript to bold text.
The simplest way to achieve bolded text is just to use an inline CSS style.
<div style="font-weight:700;">This Text is Bold</div>Using the bold Method With An Argument
The bold method does not take an argument, but passing an argument to it does not generate an error message. This behavior is consistent with other string methods that do not expect an argument.
MyText.bold("this text passed as an argument does nothing");Using the bold Method Without a Variable
It is worth mentioning that the bold method can be called on a string that is not stored in a variable.
The following code will work but is discouraged because it can be confusing to read.
document.write('bold Text'.bold());JavaScript will determine that the text within the quotes is a string and apply the bold() method to it.