javascript - How to add text to element without affecting it child elements -

i have html hierarchy 1 here

<ul id="mylist">     <li id="el_01">         <div class="title">             <span class="openclose"></span>         </div>     </li> </ul> 

what add text element .title div without removing span element.

it append input text element in .title div.

$(".title").append("<input type='text' />"); 

it append simple text .title div:

$('<p>hello all</p>').appendto('.title'); 

$(".title").append("<input type='text' />");  $('<p>hello all</p>').appendto('.title');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <ul id="mylist">  <li id="el_01">      <div class="title">          <span class="openclose"></span>      </div>  </li>