.text() 影响 h1 中的 html 元素答案

【问题标题】：.text() affects html elements inside h1.text() 影响 h1 中的 html 元素
【发布时间】：2017-08-21 21:53:31
【问题描述】：

我有以下标记：

<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 的文本，还删除了字形图标跨度。任何想法为什么？另请注意，我无法更改标记。

【问题讨论】：

标签： javascript jquery html glyphicons

【解决方案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'>");

【讨论】：

@Satpal 是真的。相应更新。

【解决方案2】：

您需要更新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>

【讨论】：

【解决方案3】：

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

})

【讨论】：

写我的答案时不知道这一点
对不起，我的错误

【解决方案4】：

您可以使用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>

【讨论】：

【解决方案5】：

.text() 将元素的内容替换为指定的文本。由于图标跨度在元素内，它将被替换。
您可以直接定位文本节点并替换其文本。

this.firstChild.nodeValue = newTitle;

【讨论】：

我认为 .text() 只替换文本内容
不，它会替换所有内容。