如何添加帶格式文本的新「p」元素

我有一個javascript函數，用於將文本動態追加到我的文檔（並用JQuery將其滑過）。我創建了一個新的「p」元素，然後我想添加文本，但是我需要這個文本有幾種格式。例如，我需要將第一部分用斜體表示，第二部分用粗體表示，第三部分用白色表示。到目前爲止，我設法用自己的文本節點獲得三個不同的「div」元素，每個元素都有自己的樣式，但是這使得它分爲三行。我需要一條線。有什麼方法可以將HTML標籤插入文本節點，或者以某種方式將內部字符串分開，以便可以分別對每個部分進行樣式設置？如何添加帶格式文本的新「p」元素

此代碼演示我得到的最接近，但這個把各樣式的文本節點在不同線路上，我需要這一切在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"); 
}

來源

2011-10-30 Sefu

你知道'var'元素，對不對？ –

爲什麼你使用直接的DOM，如果你有jQuery？ –

更改<div> S代表<span>小號，它們默認顯示爲內聯。

或者，您可以將類應用到您創建的<div>元素，並使用CSS將該類設置爲display: inline-block;。

來源

2011-10-30 01:51:24 Clive

真棒，它工作。謝謝！ – Sefu

@Richard：沒有probs很樂意幫忙:-) – Clive

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>

來源

2011-10-30 01:59:02 Raynos

如何添加帶格式文本的新「p」元素

回答

相關問題