javascript - 如何使用节点和 .createElement("b") 使文本变为粗体？

Question

如果我使用节点和 createElement 单击按钮，我必须将文本加粗，但我真的不知道如何......

html（这是我要加粗的文本）：

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

我不知道它是如何工作的。

Answer 1

“我必须用节点和 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);
}

Answer 2

我建议，不要添加新标签，而是使用 CSS，并为元素添加一个类。

CSS：

.boldText{
    font-weight: bold;
}

JavaScript：

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

Answer 3

我只是<p>在按钮按下的标签上放一个样式。也许像...

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

Answer 4

这就是使文本变粗的方式

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

Answer 5

如果您出于某种原因必须使用 js，例如，您可能只需要加粗某些单词，并且无法访问此处的样式表。否则使用 Rocket 的建议。

如果在某些时候您只需要加粗某些单词或元素中的单词组，请认真使用这样的解决方案。

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

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

现场演示

并大胆。

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

现场演示 2

Answer 6

好吧，您可以使用以下代码。它更长，可以精简——我个人觉得读起来更清楚。

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

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

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