Javascript jquery在两个标记之间插入文本（即：<；b>；<；span>；插入文本<；/span>；<；/b>；）

我已经为一个HTML表格创建了一个简短的脚本，当你点击一个单元格时，你可以修改它的内容，用保存按钮你可以保存它。当然只是暂时的，因为我只修改DOM

我想要红色的保存按钮（文本），所以我想在里面放一个标签

我非常接近解决方案，但我只是在最后一步上卡住了

这是我的密码：

  <style>
b {
  color: red;
  }

b{
颜色：红色；
}

约翰
雌鹿
简
雌鹿

Javascript

const table = document.getElementById('editTable');

table.addEventListener('click', (e) => {
  if (e.target.tagName === 'SPAN') {
    const button = e.target;
    const td = button.parentNode;
    const span = td.firstElementChild;
    if (button.textContent === span.textContent) {
      const b = document.createElement('b');
      const input = document.createElement('input');
      input.value = span.textContent;
      td.insertBefore(input, span);
      td.insertBefore(b, span);
      button.textContent = '-=>SAVE<=-';
    } else if (button.textContent === '-=>SAVE<=-') {
      const input = td.firstElementChild;
      const span = document.createElement('span');
      span.textContent = input.value;
      td.insertBefore(span, input);
      td.removeChild(input);
      button.textContent = '';
    }
  }
});

const table=document.getElementById（'editTable'）；
表.addEventListener（'click'，（e）=>{
如果（e.target.tagName=='SPAN'）{
常数按钮=e.目标；
const td=button.parentNode；
const span=td.firstElementChild；
if（button.textContent===span.textContent）{
const b=document.createElement（'b'）；
常量输入=document.createElement（'input'）；
input.value=span.textContent；
td.insertBefore（输入，跨度）；
td.插入前（b，span）；
button.textContent='-=>SAVESAVE问题是：

1-您的代码没有将
附加到

2-当按钮的
span

3-使用
e.target.textContent
时，无需使用
const span=td.firstElementChild；
，它将返回单击span的文本

4-将
const td=button.parentNode；
更改为
const td=span.closest（'td'）；
，因为
td
将不再是
span
内部
b
的父节点

纯Javascript


const table=document.getElementById（'editTable'）；
表.addEventListener（'click'，（e）=>{
如果（e.target.tagName=='SPAN'）{
常数span=e.target；
常数td=跨度最近（'td'）；
如果（span.textContent！=='-=>SAVESAVE不需要添加自定义标记和额外的CSS，只需在插入SAVE后添加
button.style.color='red'；


const table=document.getElementById（'editTable'）；
表.addEventListener（'click'，（e）=>{
如果（e.target.tagName=='SPAN'）{
常数按钮=e.目标；
const td=button.parentNode；
const span=td.firstElementChild；
if（button.textContent===span.textContent）{
常量输入=document.createElement（'input'）；
input.value=span.textContent；
td.insertBefore（输入，跨度）；
button.textContent='-=>SAVESAVE添加类

.red {
color: red;
}

然后呢

button.textContent = '-=>SAVE<=-';
button.className += "red";

button.textContent='-=>save你的答案和我的答案有什么区别？我不知道，只是花点时间写下我的答案：）你有没有看到我发布了
按钮。样式。
你刚刚发布了你的方法1？@DanielH你现在看到了吗？很好的通知。希望你在写答案之前和写答案时检查其他答案谢谢你Mohamed的帮助，你更正了我的代码。我刚刚开始学习javascript和jquery，当你写下错误的时候，我知道了id，这很有帮助。非常欢迎@Zoltan.祝你愉快：-）我不知道你的问题标题何时更新为
Jquery
。无论如何，我也用Jquery代码更新了我的答案
button.textContent = '-=>SAVE<=-';
button.className += "red";