.text() 影响 h1 内的 html 个元素

Question

我有以下标记：

<h1>A text <span class="createTask glyphicon glyphicon-plus"></span></h1>

我想做的是当我双击一个 h1 来改变它的文本。为此，我在文档就绪函数中编写了以下代码

$("h1").on("dblclick",function(){
   var newTitle = prompt("Enter a new title");
  if(newTitle){
     $(this).text(newTitle);
  }

})

但是，这段代码不仅更改了 h1 的文本，还删除了字形跨度。任何想法为什么？另外 请注意，我无法更改标记。

Answer 1

使用 $(this).text()（.html() 是正确的语法），您正在更改整个 h1 内容，包括其中的字形。

如果您想保留字形（带有跨度），请将它们与 h1 分开，如下所示：

<h1>A text </h1><span class="createTask glyphicon glyphicon-plus"></span>

或者，按照您的要求 - 不更改标记：

$(this).html(newTitle + "<span class='createTask glyphicon glyphicon-plus'>");

Answer 2

在 h1 元素内添加另一个跨度，然后

<h1>
    <span id="text">A text </span>
    <span class="createTask glyphicon glyphicon-plus"></span>
</h1>

$("h1").on("dblclick",function() {
    var newTitle = prompt("Enter a new title");
    if (newTitle){
        $(this).find('#text').text(newTitle);
    }

})

Answer 3

您可以使用 Node.previousSibling 获取 SPAN DOM 元素的前一个兄弟元素，然后可以设置其 nodeValue。

$("h1").on("dblclick", function() {
  var newTitle = prompt("Enter a new title");
  if (newTitle) {
    var span = $(this).find('span').get(0);  //get the DOM element
    span.previousSibling.nodeValue = newTitle;
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<h1>A text <span class="createTask glyphicon glyphicon-plus">+++++</span></h1>

Answer 4

您需要更新 h1 中的第一个文本节点：$(this).contents().get(0).nodeValue = newTitle;。

$("h1").on("dblclick", function() {
  var newTitle = prompt("Enter a new title");
  if (newTitle) {
    $(this).contents().get(0).nodeValue = newTitle;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<h1>A text <span class="createTask glyphicon glyphicon-plus"></span></h1>

Answer 5

.text() 用指定的文本替换元素的内容。由于图标范围在元素内部，因此它将被替换。
您可以直接定位文本节点并替换其文本。

this.firstChild.nodeValue = newTitle;

.text() 影响 h1 内的 html 个元素

.text() affects html elements inside h1

html

javascript

jquery

glyphicons