How do I change the last textual node child in JavaScript


Tags: javascript,jquery,html,css

Problem :

My Solution (EDIT : 2015-12-08) :

// FIRST WE GET THE PARENT ELEMENT
var parentEstim = document.getElementById("onglet_estim");
// MAKE A TABLE OF HIS CHILD
var enfantsEstim = parentEstim.childNodes;
// KNOW HOW MANY CHILDREN THE PARENT ELEMENT HAVE WITH .length
var Nbenfants = enfantsEstim.length;
....
for (var i = 0; i <= Nbenfants; i++) {
      // IF THE CHILD ELEMENT [i] IS A HTML ELEMENT
      if (enfantsEstim[i].nodeType === 1) {
        enfantsEstim[i].lastChild.data = ''; // REMOVE LAST TEXT NODE
        enfantsEstim[i].classList.remove('isActive');
      }
      document.getElementById('onglet_estim').style.width = '220px';
      ClickedElement.className = 'isActive';
      // ADD NEW VALUE IN THE LAST TEXT NODE FOR THE CLICKED ELEMENT 
      ClickedElement.lastChild.data = ' Gares';
    }

DEMO : http://codepen.io/Zedash/details/pjMEMY

The Problem :

I have a little problem, I want to change the last textual node child value of a link <a> element.

For exemple, for the first link, we see the word "Saisie" wrote in it and I want to remove the text in this element if the user click on an other link and add a right text for the clicked element.

function changeInputAdresse(ClassName) {
  if (ClassName.className !== 'isActive') {
    ClassName.className = 'isActive';
    switch(ClassName.id) {
      case 'linkGares' :
        ClassName.insertAdjacentHTML('beforeEnd',' Gares');
        ClassName.previousElementSibling.classList.remove('isActive');
        ClassName.nextElementSibling.classList.remove('isActive');
        ClassName.previousElementSibling.insertAdjacentHTML('beforeEnd','');
        ClassName.nextElementSibling.insertAdjacentHTML('beforeEnd','');
        break;
    }
  }
};
// THE CODE IS NOT FINISHED OF COURSE !
a {
  text-decoration:none;
  color:#000;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<a id="linkSaisie" class="isActive" href="#n" onclick="changeInputAdresse(this);"><i class="fa fa-map-marker"></i> Adresse</a>

<a id="linkGares" href="#n" onclick="changeInputAdresse(this);"><i class="fa fa-train"></i></a>

<a id="linkAeroports" href="#n" onclick="changeInputAdresse(this);"><i class="fa fa-plane"></i></a>

<a id="linkLoisirs" href="#n" onclick="changeInputAdresse(this);"><i class="fa fa-fort-awesome"></i></a>
<!--THE PART OF CODE WHERE I HAVE SOME PROBLEMS-->

Thanks for your ansewers ! :)



Solution :

I don't quite get what you exactly would like, but to target and change the element after an italic I would use this jQuery and vanilla JS combination:

$("#myLink").find(">i").get(0).nextSibling.nodeValue = "Changed text";

DEMO: http://jsfiddle.net/u9jq2bvy/

IIRC there is no jQuery method to target a text node, so you need some native JS. Please let me know if I misunderstood the question and I'm gonna delete my answer.

UPDATE

Based on the comment here is a possible solution.

$(document).on("click", ".myLink", function() {
  // clear all texts
  $(this).parent().find("a>span").text("");
  $(this).addClass("active");
  $(this).children("span").text("Active text");  
});

DEMO http://jsfiddle.net/u9jq2bvy/1

And here is a modified version which simply shows/hides the spans.

DEMO http://jsfiddle.net/u9jq2bvy/3/


    CSS Howto..

    How to reduce this css code [duplicate]

    How to apply CSS to td of particular table using Classname? [duplicate]

    How to add element to existing css class [closed]

    How do I handle setting multiple styles (due to vendor prefixes) in CSS with Javascript?

    How to alternate rowcolor in a GridView using pure CSS?

    CSS - How to select multiple attribute values?

    How to create a zig zag banner with css

    Capybara/CSS: How to find an input field by label AND value?

    How to align image and text for my html/css

    how to break unordered list of links with image or color with css

    How to modify wordpress plugin css [closed]

    How to create a rounded corner background box using CSS?

    How to align list items

    How to vertically align a DIV next to an image?

    How to use “all” property in CSS

    How to magnify images on hover using purely css? [closed]

    How do I stop a CSS layout from distorting when zooming in/out?

    How to create a CSS? [closed]

    How to center a paragraph of text on a particular word in HTML, CSS, or JavaScript?

    How to put bull inside css circle

    How to set the universal CSS selector with JavaScript?

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    How to prevent anchor tag from following the link on click, but make it show the submenu?

    How to get a css property of an externally styled element with javascript

    CSS: How to place next to each other 2 images with 50 % width?

    How to let the browser cache css and js files for a https site?

    How can I set a floats width to the left over space?

    how to position/resize image after rotation using css/js so that the image is not positioned outside the div holding it or cropped out

    How to fix the headline row in a table using css? [closed]

    Portfolio Page — How to move down to the next row