如何在HTML元素中获取文本索引

how to get index of text in a element HTML

本文关键字：获取 取文本 索引 元素 HTML      更新时间：2023-09-26

我有这段代码:

<button id="btn1"> Name of button <span> 1 </span> </button>

我想在单击按钮时将按钮的文本("按钮名称")替换为文本框元素

<button id="btn1"> <input type='text' value='Name of button'/> <span> 1 </span> </button>

我想要获取button的index text来替换它

虽然它不符合HTML标准，下面的工作在谷歌浏览器

$('#btn1').click(function(event) {
  event.preventDefault();
  if ($(this).find("input").length == 0) {
    var span = $(this).find("span").detach();
    var buttonText = $(this).text();
    $(this).empty().append("<input type='text' value='" + buttonText + "'/>");
    $(this).append(span);
    $(this).find("input").focus();
  }
});
$('#btn1').on("blur", "input", function() {
  $(this).replaceWith($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" class="editable">Name of button<span> 1 </span> 
</button>

我还添加了一些额外的东西来把文本框的值放回按钮的标签中，因为在我看来，这可能是你想要达到的效果

我的做法如下:

$('#btn1').click(function(){
    $("#btn1").contents()[0].textContent = $("#text").val();
});

这里是JSFiddle演示

Just do: 

document.querySelector('#btn1').innerHTML
  .replace('Name of button', '<input type="text" value="Name of button" />');
<button id="btn1">Name of button <span> 1 </span> 
</button>

如果答案不能满足你的需要，请评论，我将更新。

相关文章：