Jquery change text between two elements

I want to change text between two elements using JQuery, but I don't have any idea !

for example:

<input type='checkbox' name='ch1'>
    This text must be changed !!!
<input type='checkbox' name='ch2'>

Also, I don't have any control over this Html code, so I can't add any IDs or tags.



You can call contents() on the parent element to obtain its child text nodes, then use slice() with index() to locate the text nodes you want to remove. From there on, after() will allow you to add the new content:

var ch1 = $("input:checkbox[name=ch1]"),
    ch2 = $("input:checkbox[name=ch2]"),
    contents = ch1.parent().contents();
contents.slice(contents.index(ch1) + 1, contents.index(ch2)).remove();
ch1.after("The text was changed.");

You can test it in this fiddle.


You use js replace function to substitute the text you want to replace Here is the example: http://jsfiddle.net/yangchenyun/8zFFc/

Here is the code

var replacedText = $('input[name=ch1]').parent().html().replace('This text must change !!!', 'replaced text');


Are the 2 inputs in a bigger container div? Then you could se-set that divs innerHTML without the text inbetween


Can you ad a span like this?

<input type='checkbox' name='ch1'>
<span id="change"> This text must change !!!</span>
<input type='checkbox' name='ch2'>

this might be helpful for you:



function getAllBetween(firstEl,lastEl) {
    var firstElement = $(firstEl); // First Element
    var lastElement = $(lastEl); // Last Element
    var collection = new Array(); // Collection of Elements
    collection.push(firstElement); // Add First Element to Collection
    $(firstEl).nextAll().each(function(){ // Traverse all siblings
        var siblingID  = $(this).attr("id"); // Get Sibling ID
        if (siblingID != $(lastElement).attr("id")) { // If Sib is not LastElement
                collection.push($(this)); // Add Sibling to Collection
        } else { // Else, if Sib is LastElement
                return false; // Break Loop
    return collection; // Return Collection

I think you can try contents() to select the text node next to the checkbox you want and remove it.

However, I think it might not work in IE6/7.

try this


.filter( function(index){return (this.nodeType === 3 && $('input:checkbox').parents().contents().eq(index-1).attr('name') === 'ch1' ); }).remove(); });

Check out the result here


You can use paragraph

for the text as below

<input type='checkbox' name='ch1'>
<p id="change_text"> This text must change !!!</p>
<input type='checkbox' name='ch2'>

in jquery use

$("#change_text").html(" Your text here ");


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.