What Is a Text Node, Its Uses? //Document.Createtextnode()

What Is A Text Node, Its Uses? //document.createTextNode()

All viewable HTML text in a page (except text in form elements or custom embedded objects) is in text nodes. The page consists of a number of different types of nodes (you can see a listing of the different node types here: https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType), some of which can have child nodes and some of which cannot. For example, a div is an ELEMENT node which can contain child nodes. Those child nodes can be other ELEMENT nodes or they can be TEXT nodes or COMMENT nodes or other types of nodes.

When you set the .innerHTML property of an element node, it creates the appropriate nodes and makes them child nodes of the element that you set the innerHTML property on. If there is text in the innerHTML you set, then text nodes will be created to hold it.

DOCUMENT_NODE, ELEMENT_NODE and TEXT_NODE are the most common node types and are in every page that has text.

In your code example:

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);

This creates one text node and puts it into the div you created. It generates the same DOM structure as this:

var div = document.createElement('div');
div.innerHTML = 'Y HALO THAR';

In the latter case, the system creates the text node for you.

---

In plain javascript programming (jQuery tends to shield developers from nodes that aren't of type ELEMENT_NODE), you will encounter text nodes any time you walk the child nodes of an element that has text in it. You will need to check the .nodeType of each child to know whether it is another element or a text node or some other type of node.

---

In general, there aren't a lot of reasons to manipulate text nodes directly as you can often use the higher level .innerHTML property more simply. But, to give you an idea, here are a couple reasons you might want to deal directly with text nodes:

1. You want to change some text without affecting any of the elements around it. .innerHTML creates all new elements for the affected elements which kills any event handlers which might have been set on them, but setting the .nodeValue on a text node doesn't cause any elements to get recreated.

2. If you want to find just the text in a document without any of the resulting HTML markup and know exactly where each piece of text is in the DOM hieararchy, you can just search for all the text nodes. For example, if you were doing a text search of the document and then highlighting found text, you would probably search text nodes directly.

3. You want to display some text without any security risks that it might contain other markup that the browser would parse and interpret if you used .innerHTML. So, you create a text node and set the value of its text and the browser won't interpet any HTML in it. Modern browsers can also use the .textContent property of an element instead of .innerHTML to solve this problem too.

Document.createElement() vs Document.createTextNode() - Javascript

The return value of appendChild is the appended child.

So if we add variables to:

document.body.appendChild(document.createElement('h1').appendChild(document.createTextNode('hey')));

it gets broken down into:

var text = document.createTextNode('hey');
var h1 = document.createElement('h1');
h1.appendChild(text);
document.body.appendChild(text);

Appending the text to the body removes the text from the h1.

The h1 is discarded because it is never appended anywhere.

What is the equivalent of document.createTextNode(' ') in jQuery

Please be careful with the existing answers. They show how to append HTML. HTML is not Text. Treating text as HTML is a) a bug and b) dangerous.

Here is a sane solution:

$('selector').append(document.createTextNode('text < and > not & html!'))

This is using jQuery only for the append part. Nothing wrong with using createTextNode. jQuery uses createTextNode internally in its text(str) function.

TextNode or textContent?

It 's not really matter of advantage but of proper usage depending on the need.

The fundamental difference is that:

• createTextNode() is a method and works just as its name says: it creates an element... then you must do something with it (like in your example, where you append it as a child);
  
  so it is useful if you want to have a new element and place it somewhere
• textContent is a property you may get or set, with a unique statement and nothing else;
  
  so it is useful when you only want to change the content of an already existing element

Now in the precise case of your question, you said you want to change the text of the element...

To be more clear say you have the following HTML element:

<span>Original text</span>

If you're using your first solution:

var my_text = document.createTextNode('Hello!');
span.appendChild(my_text);

then it will end with:

<span>Original textHello!</span>

because you appended your textNode.

So you should use the second solution.

Problem adding text inside tags using createTextNode and createElement in javascript

There's no need to create a textNode. Just set the innerText property on the <li> element you created, and append the <li> to the <ul> element.

function Adding(){
    let li = document.createElement('li')
    li.innerText =  document.getElementById('text').value;
    document.getElementById('list').appendChild(li);
    
}

let btn = document.getElementById('btn');
btn.addEventListener('click', Adding)

body {
    background-color: aliceblue;
}

h1{
    display: block;
    margin: 10% auto 0 auto;
    width: 300px;
    color: #96e5ff;

}

.title{
    display: block;
}

.form{
    display: block;
}

input{
    display: block;
    margin: 10px auto 0 auto;
    width: 300px;
    padding: 10px;
    border-radius: 10px;
    border: 1px #d6eeff solid;
    

}

button{
    display: block;
    margin: 10px auto 0 auto;
    width: 300px;
    border-radius: 20px;
    border: none;
    padding: 10px;
    background-color: snow;
    border: solid 1px #d6eeff;

}

#list{
    padding: 150px;
    height: 300px;
    max-width: 300px !important;
    background-color: snow;
    border-radius: 10px;
    border: #d6eeff solid 1px;
    display: block;
    margin: 5px auto 0 auto
}

li{
    list-style-type: none;
    background-color: grey;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
</head>
<body>
    <div class="title">
        <h1>TODO List using JS</h1>
    </div>
    
    <div class="form">
    <input id="text" placeholder="Add something" type="text">
    <button id="btn">Submit</button>
    </div>

    <ul id="list">
        <li></li>
    </ul>

</body>

<script src="app.js"></script> 
</html>

---

Related Topics