Change font after createTextNode()

Question

I need to change the font of element created by the createTextNode() function:

var s = document.createTextNode(item.text);
s.setAttribute(\"font size\") = -1         


        

Answer 1

createTextNode creates a Text node that has only one method: splitText. setAttribute is a method of the DOM Core that is implemented by the Element interface (i.e. not text nodes).

Generally, you should avoid setAttribute as it has numerous quirks and setting the related DOM property is faster and more reliable.

In any case, there is no "fontSize" attribute specified in HTML 4.01 for text nodes so you can't expect browsers to implement it. Text nodes inherit their style from their parent element, so if you want to set the font size of some text, wrap it in an element:

window.onload = function() {
  var span = document.createElement('span');

  // Set DOM property
  span.style.fontSize = '200%';
  span.appendChild(document.createTextNode('hey'));

  // Add to document
  document.body.appendChild(span);
};

But in general you are better off to define the style in a class and attach that to the span.