서식있는 텍스트로 새 "p"요소를 추가하는 방법

Question

동적으로 문서에 텍스트를 추가하고 (JQuery로 슬라이드하는) javascript 기능이 있습니다. 새로운 "p"요소를 만든 다음 텍스트를 추가하고 싶지만이 텍스트에 여러 가지 형식이 있어야합니다. 예를 들어 첫 번째 부분은 기울임 꼴로, 두 번째 부분은 밑줄로, 세 번째 부분은 흰색으로 표시해야합니다. 현재, 나는 자신 만의 스타일 노드를 가진 3 개의 서로 다른 "div"엘리먼트를 얻을 수 있었지만, 이것으로 3 개의 분리 된 라인을 만들었다. 한 줄에 모두 필요합니다. 텍스트 노드에 HTML 태그를 삽입 할 수있는 방법이 있습니까, 아니면 각 부분을 개별적으로 스타일링 할 수 있도록 내부 문자열을 분할하는 방법이 있습니까?

이 코드는 내가 가진 가장 가까운 보여줍니다, 그러나 이것은 다른 라인에서 각각의 스타일 텍스트 노드를두고, 나는 그 페이지 요소에서 한 행에 모두 필요합니다 <span> 초 동안

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>들 , 기본적으로 인라인으로 표시됩니다.

또는 <div> 요소에 클래스를 적용하고 CSS를 사용하여 해당 클래스를 display: inline-block;으로 설정할 수 있습니다.

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> 당신은 var``에 대해 알고