innerHTML 不显示<span> <div>

Question

我试图在移动视图的下拉列表中显示<span>元素中的文本。我可以在这个jfiddle中这样做，但我正在进行的应用程序(具有相同的逻辑(不会在#testing2<div>中的每个<div>的第二个<span>中显示文本。

基本上；第一个div第一个跨度(第一个div第二个跨度("；以及"；第二div第一跨度(第二div第二跨度("；，第二个<span>的内容被删掉了，我看到的只是周围的副题，比如："；第一个div第一个span(("；以及"；第二个div第二个span(("；。

以下是示例代码：

$(document).ready(function() {
//create selcts
var sel = $('<select id="testing3"/>');
$("#testing2 div ").each(function() {
sel.append(
"<option>" + this.innerHTML + "</option>"
);
});
$(".main_div").append(sel); //append in main div
$("#testing3").hide() //hide it by default
$(window).on("resize", function() {
var $theWindowSize = $(this).width();
if ($theWindowSize <= 700) {
$("#testing3").show() //show or hide same
$("#testing2").hide()
} else if ($theWindowSize >= 701) {
$("#testing3").hide()
$("#testing2").show()
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_div">
<div id="testing2">
<div><span>first div first span (</span><span>first div second span</span>)</div>
<div><span>second div first span (</span><span>second div second span</span>)</div>
</div>
</div>

有什么想法可以解释为什么用这段代码在每个有两个跨度的div中看不到第二个跨度的内容吗？

Answer 1

在<option>中包含<span>(或任何其他非文本节点(是无效的，请参阅

把<span/><选项/>标签，只用于字符串操作而不是样式？

将代码更改为使用this.textContent而不是this.innerHTML，这样它只复制跨度中的文本，而不是HTML标记。