javascript - Why does document.createTextNode() not allow setAttribute()? - Stack Overflow

admin管理员组

文章数量:1399217

So while working with the dom, I came across the situation where I assumed that the object resulting from document.createTextNode() would be treated in a similar way to an object resulting from document.createElement();, in that I would be able to call setAttribute() on it.

Example:

var genericElementNode = document.createElement('p');
genericElementNode.setAttribute('id', 'sampleId1');
// The above will run fine


var textNode = document.createTextNode("Hello World");
textNode.setAttribute('id', 'sampleId2');
//The above will result in an error:
//Uncaught TypeError: textNode.setAttribute is not a function

Why is this the case? And are there any workarounds?

So while working with the dom, I came across the situation where I assumed that the object resulting from document.createTextNode() would be treated in a similar way to an object resulting from document.createElement();, in that I would be able to call setAttribute() on it.

Example:

var genericElementNode = document.createElement('p');
genericElementNode.setAttribute('id', 'sampleId1');
// The above will run fine


var textNode = document.createTextNode("Hello World");
textNode.setAttribute('id', 'sampleId2');
//The above will result in an error:
//Uncaught TypeError: textNode.setAttribute is not a function

Why is this the case? And are there any workarounds?

• javascript

Share Improve this question Follow asked Oct 20, 2016 at 9:54 RugnirRugnir 24055 silver badges1212 bronze badges 3

• 5 Text nodes are not elements, and therefore have a different prototype. --- setAttribute is a method of HTMLElement, which textNode does not inherit from. – evolutionxbox Commented Oct 20, 2016 at 9:55
• "are there any workarounds?" What is your end goal? – James Thorpe Commented Oct 20, 2016 at 10:01
• @evolutionxbox It would be excellent if you could expand that into an answer. Also, do you have any idea why textNode is not a 'node', despite being named as such. Why isn't it called something more appropriate? – Rugnir Commented Oct 20, 2016 at 10:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

you cant set/get any of attributes/elements of textNode

are there any workarounds?

it's easy to say creating element inside such as span and set your text

var genericElementNode = document.createElement('p');
genericElementNode.setAttribute('id', 'sampleId1');
// The above will run fine


var textNode = document.createElement("span");
textNode.innerText = "Hello World";
textNode.setAttribute('id', 'sampleId2');

document.createTextNode returns exactly that... a Text Node, which inherits from Node. This does not have the setAttribute method.

An Element, which can be created using document.createElement, also inherits from Node, but it also has a bunch more methods including setAttribute.

---

As @Mamdouh Freelancer has stated, you can instead use an inline level element such as a span.

var textNode = document.createElement('span');
textNode.textContent = 'Hello world';
textNode.setAttribute('id', 'sampleId2');

本文标签： javascriptWhy does documentcreateTextNode() not allow setAttribute()Stack Overflow