使用 Javascript 删除除文本之外的所有内部 HTML答案

【问题标题】：Remove all inner HTML except text using Javascript使用 Javascript 删除除文本之外的所有内部 HTML
【发布时间】：2018-01-16 18:04:10
【问题描述】：

我有以下 HTML 代码 -

<label id="label_id" >
   What is your name? 
   <img src=/info_icon.gif" id="tooltip">
   <div id="tooltip_modal">
      <div class="modal-content">
         <div class="modal-header">
            <span id="tooltip_close">&times;</span>
            <h5>Information</h5>
         </div>
         <div class="modal-body">
            <p> Some Sample text
            </p>
         </div>
      </div>
   </div>
</label>

使用 JavaScript，我像这样获取了 <label> 元素 -

var myLabel = document.getElementById("label_id");

我想删除 <label> 元素内的所有内容，除了 What is your name?

请注意“你叫什么名字？”表示将动态生成并插入到<label> 元素中的一段文本。

我如何做到这一点？

提前致谢！

【问题讨论】：

您是否希望它只保留标签标签内的第一行（无论是什么），或者所有不是标签的内容，直到第一个标签（并删除其余部分）？
控制的好方法是用<span> 包裹What is your name? => <span id="text">What is your name?</span>。这样您就可以将文本保留在内部，并在标签内的干净 html 后将其放回

标签： javascript html twitter-bootstrap image

【解决方案1】：

myLabel.innerHtml = '你叫什么名字？';

【讨论】：

【解决方案2】：

获取第一个文本节点，即“你叫什么名字？”并用它替换label 的内容 - 请参见下面的演示：

var myLabel = document.getElementById("label_id");
// get the first text node
var textNode = myLabel.childNodes[0];
// replace the content of label by the text
myLabel.textContent = textNode.textContent;

<label id="label_id" >
   What is your name? 
   <img src="/info_icon.gif" id="tooltip"/>
   <div id="tooltip_modal">
      <div class="modal-content">
         <div class="modal-header">
            <span id="tooltip_close">&times;</span>
            <h5>Information</h5>
         </div>
         <div class="modal-body">
            <p> Some Sample text
            </p>
         </div>
      </div>
   </div>
</label>

【讨论】：

【解决方案3】：

var myLabel = document.getElementById("label_id");
myLabel.innerHTML = 'What is your name?';

<label id="label_id" >
   What is your name? 
   <img src="/info_icon.gif" id="tooltip"/>
   <div id="tooltip_modal">
      <div class="modal-content">
         <div class="modal-header">
            <span id="tooltip_close">&times;</span>
            <h5>Information</h5>
         </div>
         <div class="modal-body">
            <p> Some Sample text
            </p>
         </div>
      </div>
   </div>
</label>

【讨论】：