子要素に影響を与えずにHTMLElementのテキストを更新する

Question

JavaScript/JQueryを使用して、子HTMLElementsに影響を与えずにHTMLElementのテキストを変更したいです。私はinnerHTMLとinnerText属性だけでなく、JQueryからhtml()方法を使用してHello, World!テキストを変更するattemtedいる

<span class="js-my-parent-span"> 
    "Hello, World!" 
    <span class="js-my-child-span"> 
    </span> 
</span> 

：

は、私は次のようになりますHTMLを持っています。これらのすべてのメソッドも子のスパンであるoverwriteです。

テキストを更新したいだけです。

Answer 1

テキストを独自のコンテナにラップすることができます。これはおそらく、ここでは最高のパターンです。

$('.text-content').text('Something else')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="js-my-parent-span"> 
 
    <span class="text-content">Hello, World!</span> 
 
    <span class="js-my-child-span">Other content</span> 
 
</span>

Answer 2

あなたはchildNodesプロパティを使用してspanのチャイルズを得ることができます。 childNodes[0]には"Hello, World!"のテキストが含まれています。

$(".parent")[0].childNodes[0].nodeValue = "New hello world-";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="parent"> 
 
    "Hello, World!" 
 
    <span>Child text</span> 
 
</span>

Answer 3

あなたは、具体的内容を保持しているテキストノードである要素の最初の子ノードをターゲットにすることができます。しかし、スパンが中文の場合、これは機能しません。

document.querySelector('button').onclick = function(){ 
 
    document.getElementById('test').childNodes[0].textContent = "It worked without changing " 
 
}

<span id="test">Change this text without removing <span>what's in the span</span></span> 
 
<button>Do It</button>

Answer 4

var childs = $(".js-my-parent-span").find(".js-my-child-span"); 
 

 
$(".js-my-parent-span").html('"Hello, world i have successfully changed only the text and not the child element!" ').append(childs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="js-my-parent-span"> 
 
    "Hello, World!" 
 
    <span class="js-my-child-span">This is child span 
 
    </span> 
 
</span>