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.getEle mentById("MyID1 ").firstChild.r eplaceData(0,
document.getEle mentById("MyID1 ").firstChild.n odeValue.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]

Stefan Mueller wrote:

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.getEle mentById("MyID1 ").firstChild.r eplaceData(0,
document.getEle mentById("MyID1 ").firstChild.n odeValue.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.getEle mentById("MyID1 ");
var bold = document.create Element("b");

bold.appendChil d(document.crea teTextNode("Thi s text is bold."));
elem.appendChil d(document.crea teTextNode("Thi s text is normal."));
elem.appendChil d(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.getEle mentById("text1 ");
t1.style.fontWe ight = 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.getEle mentById("MyID1 ").firstChild.r eplaceData(0,
document.getEle mentById("MyID1 ").firstChild.n odeValue.length , "This text is
bold.");

Stefan

[Evertjan.]

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

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.getEle mentById("MyID1 ").firstChild.r eplaceData(0,
document.getEle mentById("MyID1 ").firstChild.n odeValue.length , "This
text is bold.");

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

<button onclick=
"document.getEl ementById('b'). style.fontWeigh t='200'"200</button> <button onclick=
"document.getEl ementById('b'). style.fontWeigh t='400'"400</button> <button onclick=
"document.getEl ementById('b'). style.fontWeigh t='600'"600</button> <button onclick=
"document.getEl ementById('b'). style.fontWeigh t='800'"800</button>

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[Stefan Mueller]

> Normal

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

<button onclick=
"document.getEl ementById('b'). style.fontWeigh t='200'"

200</button>

Wow, that's cool.

Many thanks
Stefan