如何用子元素替换元素内的部分文本？

Question

I have this HTML:

<div class="test">Orange <span class="is">is</span> my favorite color.</div>

I only want to replace Orange (and the space after it). Using .text() won't work because it selects the whole strong.

How do I do this?

Answer 1

This is harder to do with jQuery than with the native DOM, so if you're using jQuery, you're going to have to convert the element to the native DOM using jQuery's array indexing.

Basically, what we need to do is change the first text node. jQuery isn't really good with text nodes, which is why we use the DOM here:

 //This gets the div.test element using jQuery: var testDiv = $("div.test"); function changeColor(color) { /* The following function changes the value of the first text node within testDiv: */ //This converts testDiv from a jQuery element to a regular DOM element. This is because jQuery isn't really meant to be handling stuff like text nodes, so doing this with the regular DOM will just be much easier. var domElement = testDiv[0]; //Now, just change the value of the first text node: domElement.childNodes[0].nodeValue = color; } //Now, as you can see if you click div.test, we can replace the color mentioned in div.test using changeColor(): testDiv.click(function() { changeColor("Blue "); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test">Orange <span class="is">is</span> my favorite color.</div> 

Answer 2

You should use native DOM methods. In your case the simples thing is just change nodeValue property of the first childNode element (which you know is going to be TextNode element):

 var el = $('.test'); el[0].childNodes[0].nodeValue = 'Green '; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test">Orange <span class="is">is</span> my favorite color.</div> 

or if you want you can grab text node with jQuery's $.fn.contents method:

 var el = $('.test'); el.contents()[0].nodeValue = 'Green '; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test">Orange <span class="is">is</span> my favorite color.</div> 

Answer 3

If you are using jquery, here is the solution

    $('.test').html(function(){
        return $(this).html().replace('Orange ','');
    });

Find the fiddle here: https://jsfiddle.net/MasoomS/xff6dw1t/

Used data attribute to refine the code and to use it for multiple strings

HTML:

 <div class="test" data-replace="Orange ">Orange <span class="is">is</span> my favorite color.</div>
 <div class="test" data-replace="Green ">Green <span class="is">is</span> my next favorite color.</div>

JQUERY:

    $('.test').html(function(){
        return $(this).html().replace($(this).data('replace'),'');
    });

Answer 4

document.getElementsByClassName("test")[0].childNodes[0].nodeValue = "Black";