How to createText and append text to an existing element e.g. empty span?

Question

Everywhere I've searched I've only found ways to append a textnode after creating a new element. For example, they'll create a new paragraph (p) element, and afterwards they append the textnode to that new paragraph. But I want to add a textnode to an existing element (in my case, an empty span).

Link to code for example and clarification http://pastebin.com/K1EBMr4Z

<span class="span"></span> <!-- append textnode here -->

function newFunction(){
    var textnode = document.createTextNode("OK");

    // Append my `textnode` to the empty span here
}

Thanks in advance

That's easy, target that span and append -> `document.querySelector('.span').appendChild(new_element)` — adeneo, Apr 21 '16 at 20:37
Use jquery and after you now that span was created set his value ok by classs! — Enrique YC, Apr 21 '16 at 20:40
You should definitively use more jQuery, it does all things. — adeneo, Apr 21 '16 at 20:40
Thanks for suggestions, but its a javascript assignment for school:) — kensington, Apr 21 '16 at 20:43

score 1 · Answer 1 · answered Apr 21 '16 at 20:38

1

It's simple. Use appendChild method.

 function newFunction(){
    var textnode = document.createTextNode("OK");
    document.querySelector(".span").appendChild(textnode);
 }

answered Apr 21 '16 at 20:38

Jakub Rożek

2,110
11
12

score 1 · Accepted Answer · answered Apr 21 '16 at 20:40

1

As mentioned in the comment, you can add the text node as a child of the span using the appendChild() method.

For text you can also just set the innerHTML property of the span.

Both examples in a bin:

function newFunction(){
  var span = document.getElementById('my-span');
  var otherSpan = document.getElementById('my-other-span');

  span.innerHTML = 'Yo this is text';

  var textNode = document.createTextNode("OK");
  otherSpan.appendChild(textNode);
};

newFunction();

https://jsfiddle.net/9pmhan8L/1/

answered Apr 21 '16 at 20:40

Ted A.

2,264
17
22

is it possible to do this selecting a class or by tagname instead of an ID? – kensington Apr 21 '16 at 20:51
Absolutely possible. Replace `document.getElementById('my-span');` with `document.querySelector('.span')` to get the first element with `class="span"` or with `document.querySelector('span')` to get the first `` element. – Ted A. Apr 21 '16 at 22:39

score 0 · Answer 3 · edited May 23 '17 at 12:07

0

If you give the span an id, you can get it using document.getElementById() and then change the html within that element. Here's a link to a SO that does this. Also, here's some docs for innerHTML and getElementByID.

edited May 23 '17 at 12:07

Community

1
1

answered Apr 21 '16 at 20:39

nscalf

528
5
10

score 0 · Answer 4 · answered Apr 21 '16 at 20:41

You need to select the node you want to append the textNode to first. Then, append the textNode to that selected node (in your case, the .span element).

<span class="span"></span>

function newFunction(){
    var textnode = document.createTextNode("Hello World!");

  // Select your existing element
  var empty_span = document.querySelector('.span');

  // Append the element
  empty_span.appendChild(textnode);
}

newFunction();

Example jsFiddle as well.

arturas · Answer 5 · 2016-04-21T20:57:14.800

-1

Why not to use jQuery:

$('span').text('text');

or

$('span').html('<p>text</p>');

If you do not use it, use:

document.getElementsByTagName('span').innerHTM = '<p>text</p>';

edited Apr 21 '16 at 20:57

answered Apr 21 '16 at 20:40

arturas

1,027
1
9
26

Because it's not tagged with jQuery, obviously, that's why! – adeneo Apr 21 '16 at 20:41
Asker doesn't say they have jQuery loaded. – Ted A. Apr 21 '16 at 20:41

How to createText and append text to an existing element e.g. empty span?

5 Answers5