'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.

javascriptjqueryhtml


Solution 1:[1]

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');

$('input[name=ch1]').parent().html(replacedText);

Solution 2:[2]

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

Solution 3:[3]

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'>

Solution 4:[4]

this might be helpful for you:

http://api.jquery.com/nextUntil/

Solution 5:[5]


$(document).ready(function(){
    alert(getAllBetween("input#ch1","input#ch2"));
});

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
}

Solution 6:[6]

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 

$(function(){
$('input:checkbox').parents().contents()

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

Check out the result here

Solution 7:[7]

Using Vanilla JS:

document.getElementsByName('ch1')[0].nextSibling.nodeValue = "changed!"
<input type='checkbox' name='ch1'>
    This text must be changed !!!
<input type='checkbox' name='ch2'>

Solution 8:[8]

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 ");

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 steveyang
Solution 2 Mattias
Solution 3 dsmith
Solution 4 Punit
Solution 5
Solution 6
Solution 7 connexo
Solution 8 Rohan Patil

Related Questions