Varrio Komjunitinovic Varrio Komjunitinovic - 6 months ago 10
Javascript Question

Modify text outside Span

recently i am having troubles with configuring text outside span table,i am willing to just modify a specific string but everything i tried did not work properly,what i want to do here is to modify text from "You are eligible to send gifts of up to 0 items, you have 0 items." to You are eligible to....,you have 500 items.Any help would be appriciated!

<span id="giftFee"></span> You are eligible to send gifts of up to 0 items, you have 0 items.<br><br> Gifting items will automatically transfer coins from your account to the recipient<br>


LINK : jsfiddle

Answer

To access the textNode following the <span> element plain JavaScript – rather than jQuery – is probably easier:

// get the <span> element from the document using
// the getElementById() method:
let span = document.getElementById('giftFee');

// if we found an element with that id and that element
// has a nextSibling and that nextSibling hasa nodeType 
// of 3 (meaning the nextSibling is a textNode):
if (span && span.nextSibling && span.nextSibling.nodeType === 3) {

  // we access that nextSibling, and update its nodeValue
  // (the text of the textNode) to the supplied string:
  span.nextSibling.nodeValue = 'Some other arbitrary string.';
}

let span = document.getElementById('giftFee');

if (span && span.nextSibling.nodeType === 3) {
  span.nextSibling.nodeValue = 'Some other arbitrary string.';
}
<span id="giftFee"></span> You are eligible to send gifts of up to 0 items, you have 0 items.

JS Fiddle demo.

To make it somewhat more functional and utilitarian, here's a function that allows for some further modifications:

// naming the function and setting the opts as an
// Object by default (to prevent errors using
// Object.keys() within the script):
function updateAdjacent(opts = {}) {

  // using 'let' (instead of 'var') to declare
  // variables:

  // settings.wrap :  Boolean, String
  //                  false: the adjacent element
  //                  will not be wrapped,
  //                  true: the adjacent element
  //                  will be wrapped in the same
  //                  element-type as the target element
  // settings.text :  String,
  //                  The new text for the adjacent element
  // settings.target: HTMLElementNode,
  //                  the element whose next-sibling text-node
  //                  you wish to adjust.
  let settings = {
    'wrap': false,
    'text': 'new arbitrary string',
    'target': null
  };

  // Iterating over the array of keys of the opts Object returned
  // by Object.keys, using Array.prototype.forEach() along with
  // an Arrow function to update the settings to reflect the
  // user-supplied options (if no option is passed in the default
  // will be used), the only mandatory option that must be supplied
  // is settings.target:
  Object.keys(opts).forEach(key => settings[key] = opts[key]);


  // if no target is passed via the opts Object we quit here:
  if (settings.target === null) {
    return false;
  }

  // for brevity here we shorten the variable-names, and
  // declare both an 'adjacent' and 'wrapper' variable:
  let target = settings.target,
    wrap = settings.wrap,
    text = settings.text,

    // the next-sibling of the target element:
    adjacent = target.nextSibling,

    // empty variable in case we need to create a wrapper
    // element:
    wrapper;

  // if we have an adjacent element and that adjacent element
  // is of nodeType 3 (a textNode):
  if (adjacent && adjacent.nodeType === 3) {

    // if wrap is not-equal to (Boolean) false:
    if (wrap !== false) {

      // if wrap is Boolean true (no element-type was specified):
      if (wrap === true) {

        // we create a new element of the same type as the
        // target:
        wrapper = document.createElement(target.localName);

      // otherwise if the wrap variable is a String:
      } else if ('string' === typeof wrap) {

        // we create an element of that specified type:
        wrapper = document.createElement(wrap);
      }

      // retrieving the parentNode of the target, and using
      // Node.insertBefore() to append the new-child (wrapper)
      // before the existing adjacent node:
      target.parentNode.insertBefore(wrapper, adjacent);

      // moving the adjacent node into the wrapper:
      wrapper.appendChild(adjacent);
    }
  }

  // here we update the nodevalue of the adjacent node
  // which is still referenced by the 'adjacent' variable
  // whether it remains 'physically' adjacent or newly-wrapped:
  adjacent.nodeValue = text;

  // here we return the adjacent node (if it was never wrapped),
  // or the newly-created parentNode (if the adjacent node was
  // wrapped):
  return wrap === false ? adjacent : adjacent.parentNode;
}

updateAdjacent({
  'target': document.getElementById('giftFee'),
  'text': 'Whatever text you might care to add.'
});

function updateAdjacent(opts = {}) {
  let settings = {
    'wrap': false,
    'text': 'new arbitrary string',
    'target': null
  };

  Object.keys(opts).forEach(key => settings[key] = opts[key]);

  if (settings.target === null) {
    return false;
  }

  let target = settings.target,
    adjacent = target.nextSibling,
    wrap = settings.wrap,
    text = settings.text,
    wrapper;

  if (adjacent && adjacent.nodeType === 3) {
    if (wrap !== false) {
      if (wrap === true) {
        wrapper = document.createElement(target.localName);
      } else if ('string' === typeof wrap) {
        wrapper = document.createElement(wrap);
      }
      target.parentNode.insertBefore(wrapper, adjacent);
      wrapper.appendChild(adjacent);
    }
  }

  adjacent.nodeValue = text;

  return wrap === false ? adjacent : adjacent.parentNode;
}

updateAdjacent({
  'target': document.getElementById('giftFee'),
  'text': 'Whatever text you might care to add.'
});
span {
  border: 1px solid #000;
  display: inline-block;
  margin: 1em 0.5em 0 0;
  padding: 0.2em 0.5em;
}
span[id]::before {
  content: '(id: ' attr(id) ') ';
}
#newSibling {
  color: #f90;
}
<span id="giftFee"></span> You are eligible to send gifts of up to 0 items, you have 0 items.

JS Fiddle demo.

The above can be be called in multiple ways, of course, and also chained if required. For example if we wrap the adjacent element (by passing true) we can then set the id of that new parent to apply a style found in the stylesheet:

function updateAdjacent(opts = {}) {
  let settings = {
    'wrap': false,
    'text': 'new arbitrary string',
    'target': null
  };

  Object.keys(opts).forEach(key => settings[key] = opts[key]);

  if (settings.target === null) {
    return false;
  }

  let target = settings.target,
    adjacent = target.nextSibling,
    wrap = settings.wrap,
    text = settings.text,
    wrapper;

  if (adjacent && adjacent.nodeType === 3) {
    if (wrap !== false) {
      if (wrap === true) {
        wrapper = document.createElement(target.localName);
      } else if ('string' === typeof wrap) {
        wrapper = document.createElement(wrap);
      }
      target.parentNode.insertBefore(wrapper, adjacent);
      wrapper.appendChild(adjacent);
    }
  }

  adjacent.nodeValue = text;

  return wrap === false ? adjacent : adjacent.parentNode;
}

updateAdjacent({
  'target': document.getElementById('giftFee'),
  'wrap': true
}).id = 'newSibling';
span {
  border: 1px solid #000;
  display: inline-block;
  margin: 1em 0.5em 0 0;
  padding: 0.2em 0.5em;
}
span[id]::before {
  content: '(id: ' attr(id)') ';
}
#newSibling {
  color: #f90;
}
<span id="giftFee"></span> You are eligible to send gifts of up to 0 items, you have 0 items.

JS Fiddle demo.

Or we can wrap in a <b> element, by passing 'b' as the opts.wrap option-value, and directly update its style property to add a text-decoration:

updateAdjacent({ 'target': document.getElementById('giftFee'), 'wrap': 'b', 'text': 'Whatever text you might care to add.' }).style.textDecoration = 'overline';

function updateAdjacent(opts = {}) {
  let settings = {
    'wrap': false,
    'text': 'new arbitrary string',
    'target': null
  };

  Object.keys(opts).forEach(key => settings[key] = opts[key]);

  if (settings.target === null) {
    return false;
  }

  let target = settings.target,
    adjacent = target.nextSibling,
    wrap = settings.wrap,
    text = settings.text,
    wrapper;

  if (adjacent && adjacent.nodeType === 3) {
    if (wrap !== false) {
      if (wrap === true) {
        wrapper = document.createElement(target.localName);
      } else if ('string' === typeof wrap) {
        wrapper = document.createElement(wrap);
      }
      target.parentNode.insertBefore(wrapper, adjacent);
      wrapper.appendChild(adjacent);
    }
  }

  adjacent.nodeValue = text;

  return wrap === false ? adjacent : adjacent.parentNode;
}

updateAdjacent({
  'target': document.getElementById('giftFee'),
  'wrap': 'b',
  'text': 'Whatever text you might care to add.'
}).style.textDecoration = 'overline';
span {
  border: 1px solid #000;
  display: inline-block;
  margin: 1em 0.5em 0 0;
  padding: 0.2em 0.5em;
}
span[id]::before {
  content: '(id: ' attr(id)') ';
}
<span id="giftFee"></span> You are eligible to send gifts of up to 0 items, you have 0 items.

Or directly add an event-listener:

updateAdjacent({
  'target': document.getElementById('giftFee'),
  'wrap': 'b',
  'text': 'Whatever text you might care to add.'
}).addEventListener('click', function(e){
  let target = e.target,
      opacity = window.getComputedStyle(target,null).opacity;

      target.style.opacity = opacity === '1' ? '0.5' : '1';
});

function updateAdjacent(opts = {}) {
  let settings = {
    'wrap': false,
    'text': 'new arbitrary string',
    'target': null
  };

  Object.keys(opts).forEach(key => settings[key] = opts[key]);

  if (settings.target === null) {
    return false;
  }

  let target = settings.target,
    adjacent = target.nextSibling,
    wrap = settings.wrap,
    text = settings.text,
    wrapper;

  if (adjacent && adjacent.nodeType === 3) {
    if (wrap !== false) {
      if (wrap === true) {
        wrapper = document.createElement(target.localName);
      } else if ('string' === typeof wrap) {
        wrapper = document.createElement(wrap);
      }
      target.parentNode.insertBefore(wrapper, adjacent);
      wrapper.appendChild(adjacent);
    }
  }

  adjacent.nodeValue = text;

  return wrap === false ? adjacent : adjacent.parentNode;
}

updateAdjacent({
  'target': document.getElementById('giftFee'),
  'wrap': 'b',
  'text': 'Whatever text you might care to add.'
}).addEventListener('click', function(e) {
  let target = e.target,
    opacity = window.getComputedStyle(target, null).opacity;

  target.style.opacity = opacity === '1' ? '0.5' : '1';
});
span {
  border: 1px solid #000;
  display: inline-block;
  margin: 1em 0.5em 0 0;
  padding: 0.2em 0.5em;
}
span[id]::before {
  content: '(id: ' attr(id)') ';
}
<span id="giftFee"></span> You are eligible to send gifts of up to 0 items, you have 0 items.

References:

Comments