我的 HTML 中有 1 按钮和一些文本，如下所示：
function get_content(){
// I don't know how to do in here!!!
}
<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>
当用户点击按钮时， 中的内容<p id='txt'>会变成如下预期的结果：
<p id='txt'>
// All the HTML element within the <p> will be disappear
I am working in ABC company.
</p>
谁能帮助我如何编写 JavaScript 函数？
谢谢你。
你可以使用这个：
var element = document.getElementById('txt');
var text = element.innerText || element.textContent;
element.innerHTML = text;
根据您的需要，您可以使用element.innerText或element.textContent。它们在很多方面都不同。innerText如果您选择所看到的内容（呈现的 html）并将其复制到剪贴板，则尝试近似会发生什么，而textContent只是剥离 html 标签并为您提供剩下的内容。
innerText 还兼容旧的 IE 浏览器（来自那里）。
[2017-07-25] 由于这仍然是公认的答案，尽管这是一个非常hacky 的解决方案，但我将Gabi的代码合并到其中，让我自己的代码作为一个坏例子。
// my hacky approach:
function get_content() {
var html = document.getElementById("txt").innerHTML;
document.getElementById("txt").innerHTML = html.replace(/<[^>]*>/g, "");
}
// Gabi's elegant approach, but eliminating one unnecessary line of code:
function gabi_content() {
var element = document.getElementById('txt');
element.innerHTML = element.innerText || element.textContent;
}
// and exploiting the fact that IDs pollute the window namespace:
function txt_content() {
txt.innerHTML = txt.innerText || txt.textContent;
}.A {
background: blue;
}
.B {
font-style: italic;
}
.C {
font-weight: bold;
}<input type="button" onclick="get_content()" value="Get Content (bad)" />
<input type="button" onclick="gabi_content()" value="Get Content (good)" />
<input type="button" onclick="txt_content()" value="Get Content (shortest)" />
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>如果你可以使用 jquery 那么它很简单
$("#txt").text()
此答案将仅用于获取任何 HTML 元素的文本。
第一个参数“节点”是从中获取文本的元素。第二个参数是可选的，如果 true 将在元素内的文本之间添加一个空格，否则那里不存在空格。
function getTextFromNode(node, addSpaces) {
var i, result, text, child;
result = '';
for (i = 0; i < node.childNodes.length; i++) {
child = node.childNodes[i];
text = null;
if (child.nodeType === 1) {
text = getTextFromNode(child, addSpaces);
} else if (child.nodeType === 3) {
text = child.nodeValue;
}
if (text) {
if (addSpaces && /\S$/.test(result) && /^\S/.test(text)) text = ' ' + text;
result += text;
}
}
return result;
}
根据您的需要，您可以使用element.innerText或element.textContent。它们在很多方面都不同。innerText如果您选择所看到的内容（呈现的 html）并将其复制到剪贴板，则尝试近似会发生什么，而textContent只是剥离 html 标签并为您提供剩下的内容。
innerText 不再仅用于 IE，所有主要浏览器都支持它。当然，与 不同的是textContent，它与旧的 IE 浏览器兼容（因为他们想出了它）。
完整示例（来自Gabi 的回答）：
var element = document.getElementById('txt');
var text = element.innerText || element.textContent; // or element.textContent || element.innerText
element.innerHTML = text;