Creating text node and adding CSS

Question

I'm attempting to create a text element and then add CSS attributes

I've tried to use the code below

function create(text){
  var t = document.createTextNode(text);  
  t.style.color = "black"
  t.style.backgroundColor="white"
  t.style.borderRadius="20px"
  t.style.border="4px solid black"
  document.body.appendChild(t);
}
create("hello");

I expect to create a text with a white background and 20px border radius with a 4px solid black border

A textnode has no style, it's just text. You might want to use some form of container, maybe a ``, or `
` depending on your use case. — Keith, May 10 '19 at 13:22

score 1 · Accepted Answer · edited May 10 '19 at 13:23

1

Instead of a text node, which I don't think you can add styles to, just use a span instead

function create(text){
  var t = document.createElement("span");
  t.innerText = text;  
  t.style.color = "black"
  t.style.backgroundColor="white"
  t.style.borderRadius="20px"
  t.style.border="4px solid black"
  document.body.appendChild(t);
}
create("hello");

edited May 10 '19 at 13:23

Keith

22,005
2
27
44

answered May 10 '19 at 13:22

ControlAltDel

33,923
10
53
80

@Squill.is.me first of all, see this SO q/a on border padding and spacing: https://stackoverflow.com/questions/15517632/html-difference-between-cell-spacing-and-cell-padding. Second, I'd recommend you check out the w3 tutorial on border-radius: https://www.w3schools.com/CSSref/css3_pr_border-radius.asp – ControlAltDel May 10 '19 at 13:52
Last question, I swear: How do l edit the top element of the span using JS – Squill.is.me May 10 '19 at 14:00
@Squill.is.me I don't understand your question: What is the "top" element? Do you mean the parent element? – ControlAltDel May 10 '19 at 14:41
the distance the element is from the top of the document – Squill.is.me May 10 '19 at 15:42
@Squill.is.me just like any html element (with only position:static children): `elem.childNodes[0];` (you need to check that elem.childNodes[0] exists.) if you mean parent nodes, again a span, just like any html element, can only have one parent node – ControlAltDel May 10 '19 at 15:49

score 1 · Answer 2 · answered May 10 '19 at 13:22

You are having trouble because text nodes are not meant to be styled.

You should create a DOM element instead. I took your code and update it in order to create a <p> (the nearest element of text node I guess) with your CSS:

function create(text) {
  var t = document.createElement('p');  
  
  t.innerText = text;
  
  t.style.color = "black"
  t.style.backgroundColor="white"
  t.style.borderRadius="20px"
  t.style.border="4px solid black"
  
  document.body.appendChild(t);
}

create("hello");

score 0 · Answer 3 · answered May 10 '19 at 13:27

You are on the right direction. The only thing you need to do is change document.createTextNode(text) with:

var t = document.createElement('span');
t.innerText = text;
\\...
document.body.appendChild(t);

The reason why your code doesn't work is that you can only style HTML tags, and the the text node you created only contains the string you added, without a surrounding tag.

For example: