Question

我收到了这段代码，我想替换顶级和低级<div>元素之间的“ARRIVAL”文本，但我无法找到方法。

我不想在replaceWith上使用html，<div class="left booktext">或类似方法，因为这会替换其余的html元素。有一个事件处理程序附加到input class="bookfields"，我不想失去它。不幸的是，没有事件委托。

<div class="left booktext">
  ARRIVAL       
  <div class="bookborder">
    <input type="hidden" name="checkin" value="2014-03-05">
    <input type="text" class="bookfields hasDatepicker" style="width:65px;" id="checkin-select" placeholder="dd/mm/yyyy">
  </div>
</div>

Answer 1

您可以使用 contents() 以及 replaceWith() ：

$('.left').contents().first().replaceWith("New Text");

<强> Fiddle Demo

Answer 2

纯粹的Javascript：

var books = document.querySelectorAll('.booktext');
for (var i = 0, length = books.length; i < length; i++) {
    books[i].firstChild.data = "your text";
}

使用jQuery更容易：

$('.booktext').contents().first().replaceWith("your text");

<强>建议
最好将文本放在span元素中，具有案例的所有好处通过这种方式，您可以在div中以任何顺序放置文本，例如：

<div class="left booktext">
  <div class="bookborder">
    <input type="hidden" name="checkin" value="2014-03-05">
    <span>ARRIVAL</span>        
    <input type="text">
  </div>
</div>

而不是替换为：

$('.bookborder span').text('my new text');

Answer 3

在纯JavaScript中，您可以访问像这样的文本节点

var bookText = document.querySelector(".booktext");
bookText.firstChild.nodeValue = "Some other text";

看到它在这里工作
http://codepen.io/sajjad26/pen/JkAms

替换div中的文本

3 个答案: