如何在 div 之外设置文本样式？

Posted 2023-02-19

【中文标题】如何在 div 之外设置文本样式？

【英文标题】：How to style the text out side of a div?

【发布时间】：2018-08-10 21:47:26

【问题描述】：

我有一个来自系统的自动生成的标题。下面是 html 的样子：

  $("#foo2").contents().filter(function() 
       return this.nodeType == 3;         
   )[0].nodeValue = "" ;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Auto-generated text
       <div id="container"></div>
       <div id="menu"></div>
       <ul >
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
       </ul>

我能够选择文本并将其删除（请参阅我的 JS）但现在我想通过 jQuery 或 JS 设置它的样式。有谁知道如何设计它？或者如何将它附加到 div#container 以便我可以设置它的样式。

【参考方案1】：

使用.appendTo( target ) 将文本节点移动到#container

说明：将匹配元素集中的每个元素插入到元素的末尾 目标。

target 类型：Selector 或 htmlString 或 Element 或 Array 或 jQuery 一个选择器，元素， HTML 字符串、元素数组或 jQuery 对象；匹配的集合 元素将插入到指定的元素的末尾 这个参数。

 $("#foo2").contents().filter(function() 
    return this.nodeType == 3;
 ).appendTo("#container");

#container  color: red 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo2"> Auto-generated text
   <div id="container"></div>
   <div id="menu"></div>
   <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
   </ul>
</div>