Question

我有一个javascript函数，旨在动态地将文本附加到我的文档中（并使用JQuery将其向下滑动）。我创建了一个新的“p”元素，然后我想为它添加文本，但我需要这个文本有几种格式。例如，我需要第一部分为斜体，第二部分为下划线，第三部分为白色。到目前为止，我设法得到三个不同的“div”元素和他们自己的文本节点，每个元素都有自己的风格，但这使得它分为三个独立的行。我需要一条线。有没有什么方法可以将HTML标签插入文本节点，或以某种方式拆分内部字符串，以便我可以单独设置每个部分的样式？

这段代码演示了我得到的最接近的，但是这会将每个样式化的文本节点放在不同的行上，我需要在p元素的一行中全部使用它：

function append_announcement(time_string, user_by, text){
    newp = document.createElement("p");

    head = document.createElement("span");
    headt = document.createTextNode("You wrote: ");
    head.appendChild(headt);

    body = document.createElement("div");
    bodyt = document.createTextNode(text);
    body.appendChild(bodyt);
    body.setAttribute("style", "color: white");

    foot = document.createElement("div");
    foott = document.createTextNode("Done.");
    foot.appendChild(foott);

    newp.appendChild(head);
    newp.appendChild(body);
    newp.appendChild(foot);
    newp.setAttribute("align", "center");
    newp.style.display = "none";
    document.getElementById("announcement_posts").insertBefore(newp,
        document.getElementById("announcement_posts").firstChild);
    $("p").slideDown("slow");
}

Answer 1

更改<div>的{{1}} s，默认情况下它们会以内联方式显示。

或者，您可以将类应用于您创建的<span>元素，并使用CSS将该类设置为<div>。

Answer 2

Example

function append_announcement(time_string, user_by, text){
    newp = document.createElement("p");

    var i = document.createElement("i");
    i.textContent = ("You wrote ");

    var span = document.createElement("span");
    span.textContent = text;
    span.style.color = "white";

    var u = document.createElement("u");
    u.textContent = " Done.";

    newp.appendChild(i);
    newp.appendChild(span);
    newp.appendChild(u);
    newp.setAttribute("align", "center");
    newp.style.display = "none";
    document.getElementById("announcement_posts").insertBefore(newp,
        document.getElementById("announcement_posts").firstChild);
    $("p").slideDown("slow");
}

您想要创建内联显示的元素，例如<i>，<u>或<span>

如何使用格式化文本追加新的“p”元素

2 个答案: