Alt öğelerini değiştirmeden bir öğenin metnini nasıl değiştirebilirim?

Öğenin metnini dinamik olarak güncellemek istiyorum:

<div>
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

JQuery'de yeniyim, bu nedenle bu görev benim için oldukça zor görünüyor. Biri beni kullanmam için bir işlev / seçiciye yönlendirebilir mi?

Mümkünse, değiştirmem gereken metin için yeni bir kap eklemeden yapmak istiyorum.

Mark , jQuery kullanarak daha iyi bir çözüme sahip , ancak bunu normal JavaScript'te de yapabilirsiniz.

Javascript'te, childNodesözellik size metin düğümleri dahil bir öğenin tüm alt düğümlerini verir.

Öyleyse, değiştirmek istediğiniz metnin her zaman öğedeki ilk şey olacağını biliyorsanız, örneğin şu HTML verilir:

<div id="your_div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

Bunu yapabilirsin:

var your_div = document.getElementById('your_div');

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

Tabii ki, <div>ilk etapta (yani var your_div = $('your_div').get(0);) seçmek için jQuery'yi kullanabilirsiniz .

2018 Güncellemesi

Bu oldukça popüler bir cevap olduğundan, textnode seçiciyi bir eklenti olarak jQuery'ye ekleyerek biraz güncellemeye ve güzelleştirmeye karar verdim.

Aşağıdaki kod parçacığında, tüm (ve yalnızca) textNode'ları alan yeni bir jQuery işlevi tanımladığımı görebilirsiniz. Bu işlevi, örneğin işlevle zincirleyebilirsiniz first(). Metin düğümünde bir kırpma yapıyorum ve kırpmadan sonra boş olup olmadığını kontrol ediyorum çünkü boşluklar, sekmeler, yeni satırlar vb. De metin düğümleri olarak tanınır. Bu düğümlere de ihtiyacınız varsa, jQuery işlevindeki if ifadesinden basitçe kaldırın.

İlk metin düğümünün nasıl değiştirileceğine ve tüm metin düğümlerinin nasıl değiştirileceğine bir örnek ekledim.

Bu yaklaşım, kodu okumayı ve birden çok kez ve farklı amaçlarla kullanmayı kolaylaştırır.

Bunu tercih ederseniz, 2017 Güncellemesi (adrach) yine de iyi çalışacaktır.

JQuery uzantısı olarak

//Add a jQuery extension so it can be used on any jQuery object
jQuery.fn.textNodes = function() {
  return this.contents().filter(function() {
    return (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== "");
  });
}

//Use the jQuery extension
$(document).ready(function(){
  $('#replaceAll').on('click', () => {
    $('#testSubject').textNodes().replaceWith('Replaced');
  });

  $('#replaceFirst').on('click', () => {
    $('#testSubject').textNodes().first().replaceWith('Replaced First');
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
   **text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **also text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

Javascript (ES) eqivilant

//Add a new function to the HTMLElement object so it cna be used on any HTMLElement
HTMLElement.prototype.textNodes = function() {
  return [...this.childNodes].filter((node) => {
    return (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "");
  });
}

//Use the new HTMLElement function
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#replaceAll').addEventListener('click', () => {
    document.querySelector('#testSubject').textNodes().forEach((node) => {
      node.textContent = 'Replaced';
    });
  });

  document.querySelector('#replaceFirst').addEventListener('click', function() {
    document.querySelector('#testSubject').textNodes()[0].textContent = 'Replaced First';
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
  **text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **also text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

2017 Güncellemesi (adrach):

Bu yayınlandıktan sonra birkaç şey değişmiş gibi görünüyor. İşte güncellenmiş bir versiyon

$("div").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("change text");

Orijinal cevap (Mevcut sürümler için çalışmıyor)

$("div").contents().filter(function(){ return this.nodeType == 3; })
.filter(':first').text("change text");

Kaynak: http://api.jquery.com/contents/

Eylemde görün

İşaretleme:

$(function() {
  $('input[type=button]').one('click', function() {
    var cache = $('#parent').children();
    $('#parent').text('Altered Text').append(cache);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">Some text
  <div>Child1</div>
  <div>Child2</div>
  <div>Child3</div>
  <div>Child4</div>
</div>
<input type="button" value="alter text" />

<div id="divtochange">
    **text to change**
    <div>text that should not change</div>
    <div>text that should not change</div>
</div>

$(document).ready(function() {
    $("#divtochange").contents().filter(function() {
            return this.nodeType == 3;
        })
        .replaceWith("changed text");
});

Bu yalnızca ilk metin düğümünü değiştirir

Değiştirmek istediğiniz metni, seçeceğiniz bir sınıfla kaydırmanız yeterlidir.

Sorunuza mutlaka cevap vermiyor bildiğim ama muhtemelen daha iyi bir kodlama uygulaması. Her şeyi temiz ve basit tutun

<div id="header">
   <span class="my-text">**text to change**</span>
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

Voila

$('#header .mytext').text('New text here')

Bahsettiğiniz özel durum için:

<div id="foo">
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

... bu çok kolaydır:

var div = document.getElementById("foo");
div.firstChild.data = "New text";

Bunu nasıl genellemek istediğinizi belirtmiyorsunuz. Diyelim ki, içindeki ilk metin düğümünün metnini değiştirmek istiyorsanız, şöyle bir <div>şey yapabilirsiniz:

var child = div.firstChild;
while (child) {
    if (child.nodeType == 3) {
        child.data = "New text";
        break;
    }
    child = child.nextSibling;
}

İşte yine bir başka yöntemi: http://jsfiddle.net/qYUBp/7/

HTML

<div id="header">
   **text to change**
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

JQUERY

var tmp=$("#header>div").html();
$("#header").text("its thursday").append(tmp);

Burada pek çok harika yanıt var, ancak çocuklarla yalnızca bir metin düğümünü ele alıyorlar. Benim durumumda, tüm metin düğümlerinde çalışmam ve html çocuklarını görmezden gelmem gerekiyordu ANCAK SİPARİŞİ KORUYUN.

Öyleyse böyle bir vakamız varsa:

<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

Aşağıdaki kodu sadece metni değiştirmek ve SİPARİŞİ KORUMAK için kullanabiliriz

    $('#parent').contents().filter(function() {
        return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
    }).each(function() {
    		//You can ignore the span class info I added for my particular application.
        $(this).replaceWith(this.nodeValue.replace(/(\w+)/g,"<span class='IIIclassIII$1' onclick='_mc(this)' onmouseover='_mr(this);' onmouseout='_mt(this);'>$1X</span>"));
	});

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

İşte jsfiddle çalışma bunun

.PrependTo () aradığınızı düşünüyorum.

http://api.jquery.com/prependTo/

Ayrıca sayfadaki bir öğeyi seçip başka birine ekleyebiliriz:

$ ( 'H-2') prependTo ($ ( 'konteyner.').);

Bu şekilde seçilen bir öğe başka bir yere yerleştirilirse, hedefe taşınacaktır (klonlanmamıştır):

<div class="container">  
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div> 
</div>

Ancak birden fazla hedef öğe varsa, eklenen öğenin klonlanmış kopyaları, ilkinden sonra her hedef için oluşturulur.

Basit cevap:

$("div").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with"

Mark'ın cevabıyla ilgili sorun, boş metin düğümleri de almanızdır. JQuery eklentisi olarak çözüm:

$.fn.textnodes = function () {
    return this.contents().filter(function (i,n) {
        return n.nodeType == 3 && n.textContent.trim() !== "";
    });
};

$("div").textnodes()[0] = "changed text";

Bu eski bir sorudur, ancak hayatınızı kolaylaştırmak için bunun gibi basit bir işlevi yapabilirsiniz:

$.fn.toText = function(str) {
    var cache = this.children();
    this.text(str).append(cache);
}

Misal:

<div id="my-div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

Kullanımı:

$("#my-div").toText("helloworld");

2019 vesrsion - Kısa ve Basit

document.querySelector('#your-div-id').childNodes[0].nodeValue = 'new text';

açıklama

document.querySelector('#your-div-id') ebeveyni seçmek için kullanılır (değiştirmek üzere olduğunuz metnin öğesi)

.childNodes[0] metin düğümünü seçer

.nodeValue = 'new text' metin düğümü değerini "yeni metin" olarak ayarlar

Bu cevap muhtemelen Dean Martin'in yorumundan ilham almıştır. Bu çözümü yıllardır kullandığım için kesin olarak söyleyemem. Sadece bu olasılığı buraya koymam gerektiğini düşündüm çünkü bazı insanlar bunu en iyi çözüm olduğu gerçeğinden daha çok önemsiyor.