获取不在另一个标签内的元素的 InnerHTML

Posted 2023-05-07

【中文标题】获取不在另一个标签内的元素的 InnerHTML

【英文标题】：Get InnerHTML of element that isnt inside another tag

【发布时间】：2014-12-03 04:24:22

【问题描述】：

如果我有

<div id="outside">
   Hello
   <div id="inside">
       Qwertyuiop
   </div>
</div>

如何在不包含内部任何内容或任何其他 html 标记的情况下获取外部的 InnerHTML？ （基本上如何获得“Hello”）

【参考方案1】：

1 一个有趣的选项：

这不是一个严肃的答案，并且基于Darin Morris' 高度破坏性的答案，但破坏性略小：

// Clone the element
var $clone = $("#outside").clone();

// Remove all the children (leaves text nodes)
$clone.children().remove();

alert($clone.text());

http://jsfiddle.net/TrueBlueAussie/ez4v83v5/4/

再次，我不会推荐这个作为替代说

2 我认真的回答：

$('#outside')[0].firstChild.nodeValue

但谁知道呢……这种技术在某些时候可能会派上用场 :)

【讨论】：

P.S.反对这个答案的人 a) 没有幽默感 b) 没有荒谬感:)

【参考方案2】：

另一种选择：

$(function()
   var theHtml = $("#outside");
   var texto = theHtml[0].childNodes[0].data;
   alert((texto));
);

小提琴：

$(function() 
  var theHtml = $("#outside");
  var texto = theHtml[0].childNodes[0].data;
  alert((texto));
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outside">
  Hello
  <div id="inside">
    Qwertyuiop
  </div>
</div>
<div id="test"></div>

【讨论】：

theHtml[0].firstChild.nodeValue 更短/更快。

我猜这个区别是一个非常微不足道的速度提升（因为它避免了一个数组索引操作），但我还是会在 shorter 方面犯错。

是的...它更短...但没有更快...有 1 毫秒或 2 毫秒之间的差异。

【参考方案3】：

尝试在这种情况下使用.contents()

alert($("#outside").contents().first()[0].nodeValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="outside">
   Hello
   <div id="inside">
       Qwertyuiop
   </div>
</div>

【讨论】：

注意：first()[0] 是多余的。 $("#outside").contents()[0].nodeValue 做同样的事情:)

【参考方案4】：

您正在尝试获取第一个孩子的价值，所以

alert($('#outside').prop('firstChild').nodeValue)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outside">
   Hello
   <div id="inside">
       Qwertyuiop
   </div>
</div>

【讨论】：

对 HTML 元素属性使用 prop 是否更好（而不仅仅是 $('#outside')[0].firstChild.nodeValue)？

@TrueBlueAussie 我真的看不出有什么不同.. 除了使用.prop() 需要再次运行一些 jQuery 代码

好的。如果您没有偏好，也许只是避免prop 的开销呢？ （如果没有孩子，要么会中断，所以 jQuery prop 并没有真正增加任何价值）。无论如何+1 :)

【参考方案5】：

Array.prototype.filter.call(document.querySelector('#outside').childNodes, function (node) 
    return node.nodeValue;
);

你也可以在 Vanilla 中试试这个，如果你在 div 后面有其他字符串，它也会处理一个案例。

【参考方案6】：

可能有更好的方法来做到这一点，但这应该适合你：

var kids = $("#outside").children();

for(var i = 0; i < kids.length; i++)

    if(kids[i].nodeType != 3)
    
        $(kids[i]).remove();
    


alert($("#outside").text());

查看这个 JSFiddle：http://jsfiddle.net/ez4v83v5/1

【讨论】：

不，实际上还不够好。该问题没有具体说明是否只有第一个文本节点是特别需要的，或者第一个文本节点是否是父节点的第一个子节点。我的解决方案解决了该问题并获取所有文本内容，而不管文本在父元素内容中的位置如何。对于它的价值， $("#outside").children().remove();应该可以，但它在 JSFiddle 中不起作用，所以我不推荐它。这可能是 JSFiddle 的错误...

-1：不开玩笑，上面的代码在提取文本节点值的过程中破坏了DOM元素。它还使用了完全冗余的for 循环和if 检查children 不返回nodeType 的元素 3. 你得到与$("#outside").children().remove(); 相同的效果jsfiddle.net/TrueBlueAussie/ez4v83v5/5 基本上它不仅是破坏DOM，但也效率低下。

好的，没关系。我之所以说“它可能会做得更好”是有原因的...... ("#outside").children().remove();似乎可以在您的 JSFiddle 中使用。

【参考方案7】：

试试jquery api children，试试fiddle

$(document).ready(function()
    alert($('#outside').clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text());

);

希望对你有帮助……

【讨论】：

目的是获得Hello（这是一个文本节点，children() 不可见），而不是Qwertyuiop。对不起。