javascript - 使用 Javascript 删除除文本之外的所有内部 HTML

Question

我有以下 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> 中的一段文本元素。

我如何实现这一目标？

提前致谢!

Answer 1

获取第一个文本节点“What is your name?”并用它替换 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>