Displaying a bold text with a JavaScript

[Stefan Mueller]

In HTML I use <b>...</b> to make parts of a text bold.
<h1 class = "Style-MyText">This text is normal. <b>This text is
bold.</b></h1>

Now I'd like to do the same with a JavaScript.
I tried
HTML: <h1 id = "MyID1" class = "Style-MyText">.</h1>
JavaScript: document.getElementById("MyID1").firstChild.replaceData(0,
document.getElementById("MyID1").firstChild.nodeValue.length, "This text is
normal. <b>This text is bold.</b>");

Unfortunately <b>...</b> is displayed as '<b>' and '</b>' and not
interpreted to make the text bold.
'View Selection Source' shows: This text is normal. &lt;/b&gt;This text is
bold.&lt;/b&gt;

Is there a way to make some parts of a text bold with a JavaScript?
Stefan

 

[web.dev]

In HTML I use <b>...</b> to make parts of a text bold.
<h1 class = "Style-MyText">This text is normal. <b>This text is
bold.</b></h1>

Now I'd like to do the same with a JavaScript.
I tried
HTML: <h1 id = "MyID1" class = "Style-MyText">.</h1>
JavaScript: document.getElementById("MyID1").firstChild.replaceData(0,
document.getElementById("MyID1").firstChild.nodeValue.length, "This text is
normal. <b>This text is bold.</b>");

Unfortunately <b>...</b> is displayed as '<b>' and '</b>' and not
interpreted to make the text bold.
'View Selection Source' shows: This text is normal. &lt;/b&gt;This text is
bold.&lt;/b&gt;

Is there a way to make some parts of a text bold with a JavaScript?
Stefan

Try the following:
var elem = document.getElementById("MyID1");
var bold = document.createElement("b");

bold.appendChild(document.createTextNode("This text is bold."));
elem.appendChild(document.createTextNode("This text is normal."));
elem.appendChild(bold);

Another note: Since you are using the header tags, the text is already
bold in between, you can try using perhaps <div> tags to see a better
result.

 

[Funktopia]

You could put <span> or <div> tags around the text you want to alter
then use javascript to set the value of font-weight.

HTML:
<div id="text1">The text to change goes here</div>

JavaScript:
var t1 = document.getElementById("text1");
t1.style.fontWeight = 700;

You need to either put the JavaScript in a function or after the <div>
in the code otherwise it won't find the element. (fontWeight =400 is
normal text)

 

[Stefan Mueller]

Many thanks for your replies.

I found in the Internet that <b> can also have an ID. Therefore I'm doing it
like
HTML: <h1 class = "Style-MyText">This text is normal. <b id = "MyID1"
class = "Style-MyText">.</b></h1>
JavaScript: document.getElementById("MyID1").firstChild.replaceData(0,
document.getElementById("MyID1").firstChild.nodeValue.length, "This text is
bold.");

Stefan

 

[Evertjan.]

Stefan Mueller wrote on 15 nov 2005 in comp.lang.javascript:

Many thanks for your replies.

I found in the Internet that <b> can also have an ID. Therefore I'm
doing it like
HTML: <h1 class = "Style-MyText">This text is normal. <b id =
"MyID1"
class = "Style-MyText">.</b></h1>
JavaScript:
document.getElementById("MyID1").firstChild.replaceData(0,
document.getElementById("MyID1").firstChild.nodeValue.length, "This
text is bold.");

Normal
<br>
<b id='b'>Bold</b>
<br>

<button onclick=
"document.getElementById('b').style.fontWeight='200'"

200</button>

<button onclick=
"document.getElementById('b').style.fontWeight='400'"

400</button>

<button onclick=
"document.getElementById('b').style.fontWeight='600'"

600</button>

<button onclick=
"document.getElementById('b').style.fontWeight='800'"

 

[Stefan Mueller]

Normal

<br>
<b id='b'>Bold</b>
<br>

<button onclick=
"document.getElementById('b').style.fontWeight='200'"

Wow, that's cool.

Many thanks
Stefan