Question

我有一个按钮，它包含一个名称和一个图标。我想动态更改按钮的名称，但不要触摸该图标。我该怎么做？ innerHTML innerText完全改变了，不适合他们

<button>
   NameButton
    <svg>
    </svg>
</button>

Answer 1

将名称包装在span或div元素中，然后尝试更改名称..

HTML

<button id="buttonid">
   <span>NameButton<span>
    <svg>
    </svg>
</button>

JavaScript

function changeName(btnid, value){
    var btn = document.querySelctor("#"+btnid+" span");
    btn.innerHTML = value;
}

Answer 2

您可以将文本包装到span标签中，并使用childNode进行更改

document.querySelector("button").childNodes[1].textContent="Something"

<button>
   <span>NameButton</span>
    <svg>
    
    </svg>
</button>

或不包入范围

document.querySelector("button").childNodes[0].textContent="Something2"

<button>
   NameButton
    <svg>
    
    </svg>
</button>

Answer 3

最好的方法是离开：

<button>NameButton</button>

这是最语义化的方式，并在CSS中添加svg图标

button:after {
    background-image: url('my-file.svg');
}

Answer 4

最好的解决方案是将文本简单地包装在span中，如其他答案所述。但是，如果出于某种原因而坚持不这样做，则需要深入研究按钮的childNodes，并更改第一个按钮（即文本节点）的textContent。

document.querySelector('button').childNodes[0].textContent = "Hellow";

<button>
   NameButton
    <svg>
    </svg>
</button>

Answer 5

首先提取svg，然后更改文本，然后重新添加svg。

let btn = document.getElementById('b');
let svg = btn.children[0]
btn.textContent = "changed";
btn.appendChild(svg);

<button id="b">
   NameButton
    <svg>
    <circle cx="50" cy="50" r="50"/>
    </svg>
</button>

Answer 6

以下是使用TextNode.prototype.wholeText正确执行操作的方法：

const button = document.querySelector('button');
const buttonTextNode = button.childNodes[0];
button.removeChild(button.childNodes[0]);
button.insertBefore(new Text(buttonTextNode.wholeText.replace(buttonTextNode.wholeText, 'NewNameForTheButton')), button.firstElementChild);

<button>
   NameButton
  <br /><span>untouched</span>
</button>

这完全不会影响按钮的其他子元素。

动态更改按钮名称

6 个答案: