I got this snippet of code and I would like to replace the "ARRIVAL" text which is between the top and lower level <div> element but I can't figure out a way.

I don't want to use replaceWith , html or similar methods on <div class="left booktext"> because that would replace the rest of html elements. There is an event handler attached to input class="bookfields" and I don't want to lose that. Unfortunately, there is no event delegation.

<div class="left booktext">
  ARRIVAL       
  <div class="bookborder">
    <input type="hidden" name="checkin" value="2014-03-05">
    <input type="text" class="bookfields hasDatepicker" style="width:65px;" id="checkin-select" placeholder="dd/mm/yyyy">
  </div>
</div>

I got this snippet of code and I would like to replace the "ARRIVAL" text which is between the top and lower level <div> element but I can't figure out a way.

I don't want to use replaceWith , html or similar methods on <div class="left booktext"> because that would replace the rest of html elements. There is an event handler attached to input class="bookfields" and I don't want to lose that. Unfortunately, there is no event delegation.

<div class="left booktext">
  ARRIVAL       
  <div class="bookborder">
    <input type="hidden" name="checkin" value="2014-03-05">
    <input type="text" class="bookfields hasDatepicker" style="width:65px;" id="checkin-select" placeholder="dd/mm/yyyy">
  </div>
</div>

• javascript
• jquery
• html

• 1 Try this: $('.left.booktext').get(0).childNodes[0].textContent = "New text"; – Mr_Green Commented Mar 5, 2014 at 9:26
• Awesome thanks! Can you change it so I can mark it as answer? – georgez Commented Mar 5, 2014 at 9:28
• don't know much jquery.. so converted to javascript :) – Mr_Green Commented Mar 5, 2014 at 9:28
• 2 @george my solution is similar to what Felix shown below. please do that. – Mr_Green Commented Mar 5, 2014 at 9:29
• sorry, I've read bad.. i update answer! – SirDeveloper Commented Mar 5, 2014 at 9:38

3 Answers 3

You can use contents() along with replaceWith():

$('.left').contents().first().replaceWith("New Text");

Fiddle Demo

In pure Javascript:

var books = document.querySelectorAll('.booktext');
for (var i = 0, length = books.length; i < length; i++) {
    books[i].firstChild.data = "your text";
}

Easier with jQuery though:

$('.booktext').contents().first().replaceWith("your text");

Advice
Is better put text in a span element, with all the benefits of the case.
In this way you can put your text in any order inside div, like:

<div class="left booktext">
  <div class="bookborder">
    <input type="hidden" name="checkin" value="2014-03-05">
    <span>ARRIVAL</span>        
    <input type="text">
  </div>
</div>

And than replace with:

$('.bookborder span').text('my new text');

In pure javascript you can access a text node like this

var bookText = document.querySelector(".booktext");
bookText.firstChild.nodeValue = "Some other text";

see it working here
http://codepen.io/sajjad26/pen/JkAms