How to style the text out side of a div?

I have an auto-generated title that comes from the system. Here’s what the HTML look like:

  $("#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>

I was able to select the text and remove it (see my JS) But now I want to style it via jQuery or JS. Does anyone know how to style it? Or how to append it to the div#container so I can style it.

Answer

Use .appendTo( target ) to move the text node(s) into #container

Description: Insert every element in the set of matched elements to the end of the target.

target
Type: Selector or htmlString or Element or Array or jQuery A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements will be inserted at the end of the element(s) specified by this parameter.

 $("#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>