Question

我想使用JavaScript / JQuery来修改HTMLElement的文本，而不会影响子HTMLElements。

我的html看起来像：

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

我已尝试使用Hello, World!和innerHTML属性以及innerText中的html()方法更改JQuery文字。所有这些方法也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

您可以定位元素的第一个子节点，特别是包含内容的文本节点。但是，如果跨度为句子中间，则不起作用。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="Controller">
    <input type="text" 
           ng-model="name" 
           restrict-invalid-input 
           validate-username 
    />
    {{name}}
</div>
</div>

＆＃13;

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

＆＃13;

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

更新HTMLElement的文本而不影响子元素

4 个答案: