How to add span elements within text node (document.createTextNode('...')) in JS?

Question

I know that document.createTextNode(text) in JS is for creating text only, but is there a way to insert into it two span elements?

I have two spans created like this:

/*
   *   span with wrong (old) medical word
   */

  // Replacement node
  var span_old = $('<span />', {
    'class': pluginName + '-autoword-highlight wrong wrong-medical-word-'+i
  });

  // If we have a new match
  if (i !== c) {
    c = i;
    replaceElement = span_old;
  }

  span_old
  .text(fill)
  .data({
    'firstElement': replaceElement,
    'word': oldWord
  });




  /*
   *  span with new - corrected medical word
   * 
   */
  // Replacement node
  var span_new = $('<span />', {
    'class': pluginName + '-autoword-highlight corrected-medical-word-'+i
  });

  // If we have a new match
  if (i !== c) {
    c = i;
    replaceElement = span_new;
  }

  span_new
  .text(replaceFill)
  .data({
    'firstElement': replaceElement,
    'word': replaceFill
  });

  var wrong_and_corrected_medical_text = span_old[0] + span_new[0];

  return document.createTextNode(wrong_and_corrected_medical_text);

Expected result is

old text - new text

and I need to return Text Node as always. Is there a hack to stringify the span elements or other way? Thanks!

Muthukannan Kanniappan · Accepted Answer · 2016-05-24 07:56:29Z

1

Is this what you need?

var wrong_and_corrected_medical_text = span_old.text() + span_new[0].text();

Edit: So you need the html to be returned as text, Please try this.

var wrong_and_corrected_medical_text = span_old.prop('outerHTML') + span_new.prop('outerHTML');

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

edited May 24, 2016 at 7:56

answered May 24, 2016 at 7:43

Muthukannan Kanniappan

2,0791 gold badge16 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2670818 Over a year ago

Almost. I need to keep the span tags, the example you are showing is just obtaining the text of the span and returning two strings, but I need two strings wrapped in spans. I thoung "<span>old</span><span>new-text</span>" with the quotes would help, but cannot make it.

Collectives™ on Stack Overflow

How to add span elements within text node (document.createTextNode('...')) in JS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related