CODEWITHSUNDEEP
javascriptnodes
Peter Mere
Peter Mere

Reputation: 31

How can I make text bold with nodes and .createElement("b")?

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.

Upvotes: 3

Views: 12549

Answers (6)

Loktar
Loktar

Reputation: 35309

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

Upvotes: 0

king14nyr
king14nyr

Reputation: 715

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";
}

Upvotes: 4

Ibu
Ibu

Reputation: 43810

This is how you make the text bold

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

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227190

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';
}

Upvotes: 5

gray state is coming
gray state is coming

Reputation: 2107

"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);
}

Upvotes: 6

enhzflep
enhzflep

Reputation: 13089

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);
}

Upvotes: 0

Related Questions