Question

我有这段代码：

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

我想在点击时将按钮文本（“按钮名称”）替换为文本框元素

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

所以，我想获取按钮的索引文本来替换它。

Answer 1

我是这样做的：

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

Here is the JSFiddle demo

Answer 2

只是做：

＆＃13;

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

＆＃13;

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

＆＃13;

如果答案无法满足您的需求，请发表评论，然后我会对其进行更新。

Answer 3

虽然它不符合HTML标准，但以下版本适用于Google Chrome

$('#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>

我还添加了一些额外的内容，将文本框中的值放回到按钮的标签中，因为它看起来像是你想要实现的目标。

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

3 个答案: