来自输入字段时如何通过javascript函数设置文本样式

Question

I have one input field that facilitates a person having a conversation but playing both roles in the convo. I want to get as close as I can to what its like to have a text conversation, but I cannot seem to sort out how to style the text when it comes through.

As of the moment, the user types the text and hits one of two buttons, each is loaded with the following function to pull the text, create a div, text node, append them and place in the page.

I tried styling the initial input but that simply makes the input field styled, does not affect the actual output.

I tried adding style at each step of the way, to the variable I saved the input in, to the p, the div, the text node, and after placing it in the doc... each time the function failed.

I tried the attribute method and an innerhtml approach.

What would work? At minimum I would love the function to bold and right align the text. Next best would be to append it with the contents of an ng-app so it says Me: (text here), then My future self: (text here)... which I sense would just involve a string set to a variable.. but setting x = {{name}} caused the function to fail..

I know theres a way to use firebug to understand these failures, but I am not quite understanding that yet. Any suggestions?

<script>




function changeTextComment4(destination){ 
// to be modified from the above to change the location of the dump
// this function ADDS a comment from the comment field to the div w id comment near it... 

var userInput = document.getElementById('userInputS1').value;  
// get the input from the user

// 3 make the div a panel

var para = document.createElement("P");
// assignment of attributes

var t = document.createTextNode(userInput);
para.appendChild(t);  


// add comment area

// place the item
var destination = document.getElementById(destination)
destination.insertBefore(para, destination.firstChild);

document.getElementById('userInputS1').value = "";
document.getElementById('userInputS1').focus();}

</script>

Answer 1

you can add style by referring to the selector

#userInputS1{
    color : #F00;
}