I have to make text bold if I click on a button using nodes and createElement but I don't really know how...

html (This is the text I want to make bold):

<p id="textalt">Dies ist ein Text in einem P-Tag</p>

javascript:

function fettmachen(){
var neuB = document.createElement("b");
document.getElementById("textneu").insertBefore(neuB,  document.getElementById("textneu").nextSibling);
}

I don't know how it works.

I have to make text bold if I click on a button using nodes and createElement but I don't really know how...

html (This is the text I want to make bold):

<p id="textalt">Dies ist ein Text in einem P-Tag</p>

javascript:

function fettmachen(){
var neuB = document.createElement("b");
document.getElementById("textneu").insertBefore(neuB,  document.getElementById("textneu").nextSibling);
}

I don't know how it works.

• javascript
• nodes

• Why not make a CSS class that bolds text, and add it to the element? – gen_Eric Commented Sep 12, 2012 at 19:11
• I agree with Rocket, but just thought I'd mention that if you are going to use a tag to make it bold, you should be using the <strong> tag instead. – RobMasters Commented Sep 12, 2012 at 19:15
• Way better to NOT use new HTML nodes and just use CSS and classnames. – jfriend00 Commented Sep 12, 2012 at 19:31

6 Answers 6

"I have to do it with nodes and createElement"

function fettmachen(){
       // create the "b" element
    var neuB = document.createElement("b");

       // fetch the "textneu" element by ID
    var textneu = document.getElementById("textneu");

       // append the firstChild of "nextneu" to the "neuB"
    neuB.appendChild(textneu.firstChild);

       // append the "neuB" to the "nextneu"
    nextneu.appendChild(neuB);
}

I suggest, instead of adding new tags, just use CSS, and add a class to the element.

CSS:

.boldText{
    font-weight: bold;
}

JavaScript:

function fettmachen(){
    document.getElementById("textalt").className += ' boldText';
}

I'd just put a style on the <p> tag on the button press. Maybe something like...

function fettmachen(){
var neuB = document.getElementById("textalt");
neuB.style.fontWeight = "bold";
}

Well, you could use the following code. It's longer and could be condensed - I find it clearer to read, personally.

function fettmachen()
{
    var pElem = document.getElementById('textAlt');
    var text = pElem.innerHTML;

    var bElem = document.createElement('b');
    bElem.innerHTML = text;

    pElem.innerHTML = '';
    pElem.appendChild(bElem);
}

This is how you make the text bold

function fettmachen(){
 var p = document.getElementById("textneu");
 p.style.fontWeight = "bold;"
}

If you have to use js for some reason for instance you need to only bold certain words maybe, and don't have access to the style sheet here you go. Otherwise use what Rocket has suggested.

Seriously only use a solution like this if at some point you will need to only bold certain words, or groups of words within an element.

function fettmachen(){
    var neuB = document.createElement("b"),
        textEl = document.getElementById("textalt"),
        text = textEl.textContent;

    neuB.textContent = text;
    textEl.textContent = "";
    textEl.appendChild(neuB);
}

Live Demo

And to unbold.

function unbold(){
    var textEl = document.getElementById("textalt"),
        boldEls = textEl.getElementsByTagName("b"),
        text = "";

    for(var i = 0; i < boldEls.length; i++){
        text+=boldEls[i].textContent;
        textEl.removeChild(boldEls[i]);
    }

    textEl.textContent = text;
}

Live Demo 2