ฉันจะเปลี่ยนข้อความขององค์ประกอบโดยไม่เปลี่ยนองค์ประกอบลูกได้อย่างไร

ฉันต้องการอัปเดตข้อความขององค์ประกอบแบบไดนามิก:

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

ฉันยังใหม่กับ jQuery ดังนั้นงานนี้ดูเหมือนจะค่อนข้างท้าทายสำหรับฉัน ใครช่วยชี้ฉันไปที่ฟังก์ชัน / ตัวเลือกที่จะใช้?

ถ้าเป็นไปได้ฉันต้องการทำโดยไม่ต้องเพิ่มคอนเทนเนอร์ใหม่สำหรับข้อความที่ฉันต้องการเปลี่ยนแปลง

Mark มีทางออกที่ดีกว่าเมื่อใช้ jQueryแต่คุณอาจสามารถทำได้ใน JavaScript ปกติด้วย

ใน Javascript childNodesคุณสมบัติจะให้โหนดลูกทั้งหมดขององค์ประกอบรวมถึงโหนดข้อความ

ดังนั้นหากคุณรู้ว่าข้อความที่คุณต้องการเปลี่ยนแปลงมักจะเป็นสิ่งแรกในองค์ประกอบจากนั้นให้เช่น HTML นี้:

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

คุณสามารถทำได้:

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

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

แน่นอนคุณยังสามารถใช้ jQuery เพื่อเลือก<div>ในตอนแรก (เช่นvar your_div = $('your_div').get(0);)

อัปเดต 2018

เนื่องจากนี่เป็นคำตอบที่ได้รับความนิยมมากฉันจึงตัดสินใจอัปเดตและตกแต่งมันเล็กน้อยโดยการเพิ่มตัวเลือกโหนดข้อความลงใน jQuery เป็นปลั๊กอิน

ในตัวอย่างด้านล่างคุณจะเห็นว่าฉันกำหนดฟังก์ชัน jQuery ใหม่ที่รับ textNodes ทั้งหมด (และเท่านั้น) คุณสามารถเชื่อมต่อฟังก์ชันนี้ได้เช่นกันกับตัวอย่างเช่นfirst()ฟังก์ชัน ฉันทำการตัดแต่งบนโหนดข้อความและตรวจสอบว่ามันไม่ว่างเปล่าหลังจากการตัดแต่งหรือไม่เนื่องจากช่องว่างแท็บบรรทัดใหม่ ฯลฯ ได้รับการยอมรับว่าเป็นโหนดข้อความ หากคุณต้องการโหนดเหล่านั้นด้วยให้ลบออกจากคำสั่ง if ในฟังก์ชัน jQuery

ฉันได้เพิ่มตัวอย่างวิธีการแทนที่โหนดข้อความแรกและวิธีแทนที่โหนดข้อความทั้งหมด

วิธีนี้ช่วยให้อ่านโค้ดได้ง่ายขึ้นและใช้หลายครั้งได้ง่ายขึ้นและมีวัตถุประสงค์ที่แตกต่างกัน

การอัปเดต 2017 (adrach)ควรใช้งานได้เช่นกันหากคุณต้องการ

เป็นส่วนขยาย jQuery

//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 (adrach):

ดูเหมือนว่ามีหลายอย่างเปลี่ยนไปตั้งแต่โพสต์นี้ นี่คือเวอร์ชันอัปเดต

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

คำตอบเดิม (ใช้ไม่ได้กับเวอร์ชันปัจจุบัน)

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

ที่มา: http://api.jquery.com/contents/

ดูในการดำเนินการ

มาร์กอัป:

$(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");
});

สิ่งนี้เปลี่ยนแปลงเฉพาะโหนดข้อความแรก

เพียงแค่ตัดข้อความที่คุณต้องการเปลี่ยนในช่วงที่มีคลาสให้เลือก

ฉันรู้ไม่จำเป็นต้องตอบคำถามของคุณ แต่น่าจะเป็นการฝึกฝนการเขียนโค้ดที่ดีกว่า รักษาความสะอาดและเรียบง่าย

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

สำหรับกรณีเฉพาะที่คุณกล่าวถึง:

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

... ง่ายมาก:

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

คุณไม่ได้ระบุว่าคุณต้องการสรุปสิ่งนี้อย่างไร หากคุณต้องการเปลี่ยนข้อความของโหนดข้อความแรกภายในโหนด<div>คุณสามารถทำสิ่งนี้ได้:

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

นี่คือยังวิธีอื่น: 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);

คำตอบที่ยอดเยี่ยมมากมายที่นี่ แต่จัดการกับโหนดข้อความเดียวกับลูกเท่านั้น ในกรณีของฉันฉันจำเป็นต้องดำเนินการกับโหนดข้อความทั้งหมดและไม่สนใจเด็ก html แต่สงวนการสั่งซื้อ

ดังนั้นหากเรามีกรณีเช่นนี้:

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

เราสามารถใช้รหัสต่อไปนี้เพื่อแก้ไขข้อความเท่านั้นและสงวนการสั่งซื้อ

    $('#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>

นี่คือjsfiddleของมันที่ใช้งานได้

ฉันคิดว่าคุณกำลังมองหา. prependTo ()

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

นอกจากนี้เรายังสามารถเลือกองค์ประกอบบนหน้าและแทรกเข้าไปในองค์ประกอบอื่น:

$ (H2) prependTo ($ ( 'ภาชนะ.')).

หากองค์ประกอบที่เลือกด้วยวิธีนี้ถูกแทรกที่อื่นองค์ประกอบนั้นจะถูกย้ายไปยังเป้าหมาย (ไม่ได้โคลน):

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

อย่างไรก็ตามหากมีองค์ประกอบเป้าหมายมากกว่าหนึ่งองค์ประกอบสำเนาขององค์ประกอบที่แทรกจะถูกสร้างขึ้นสำหรับแต่ละเป้าหมายหลังจากรายการแรก

คำตอบง่ายๆ:

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

ปัญหากับคำตอบของ Mark คือคุณได้รับ textnodes ที่ว่างเปล่าเช่นกัน โซลูชันเป็นปลั๊กอิน jQuery:

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

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

นี่เป็นคำถามเก่า แต่คุณสามารถสร้างฟังก์ชันง่ายๆเช่นนี้เพื่อทำให้ชีวิตของคุณง่ายขึ้น:

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

ตัวอย่าง:

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

การใช้งาน:

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

2019 vesrsion - สั้นและเรียบง่าย

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

คำอธิบาย

document.querySelector('#your-div-id') ใช้สำหรับเลือกพาเรนต์ (องค์ประกอบที่คุณกำลังจะเปลี่ยนข้อความ)

.childNodes[0] เลือกโหนดข้อความ

.nodeValue = 'new text' ตั้งค่าโหนดข้อความเป็น "ข้อความใหม่"

คำตอบนี้อาจได้รับแรงบันดาลใจจากข้อคิดเห็นของ Dean Martin ไม่สามารถพูดได้อย่างแน่นอนเนื่องจากฉันใช้วิธีนี้มาหลายปีแล้ว แค่คิดว่าฉันควรโพสต์ความน่าจะเป็นนี้ไว้ที่นี่เพราะบางคนสนใจมันมากกว่าความจริงที่ว่านี่คือทางออกที่ดีที่สุด