Добавить вход после текстовой области с помощью Javascript или jQuery

Question

У меня есть текстовая область в DIV, которую я не могу изменить.

Мне нужно добавить элемент, флажок ввода сразу после текстовой области с помощью JavaScript.

Это код:

<div id="msgrapidosinick"><p class="msguser">My Wall</p>
   <form method="post" id="messaggioajaxd" name="frm2">
   <textarea class="areamsgnoava" name="messaggio"></textarea>
   <input type="hidden" value="1" name="invia" id="invia">
   <input type="hidden" value="1" name="riceve" id="riceve">
   <input type="hidden" value="/assyrian" name="pagina" id="pagina">
   <input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
   </form>
   </div>

Так что сразу после текстовой области мне нужно добавить элемент, то есть флажок ввода, при нажатии текстовой области.

Как мне это сделать?

Пожалуйста, помогите мне.

Просто, чтобы вы знали, что мой сайт загружает также jQuery 1.3.2

Спасибо

Answer 1

Вы можете использовать метко названный метод after () :

$("textarea[name=messaggio]").click(function() {
    $(this).after("<input type='checkbox' name='yourCheckBoxName' />");
});

Если вы хотите избежать создания флажка, если он уже существует, вы можете сделать что-то вроде:

$("textarea[name=messaggio]").click(function() {
    var $this = $(this);
    if (!$this.next(":checkbox").length) {
        $this.after("<input type='checkbox' name='yourCheckBoxName' />");
    }
});

Answer 2

Предполагая, что вам нужен только флажок, созданный при первом щелчке текстовой области, вы можете сделать что-то вроде этого:

 $("#messaggioajaxd textarea").click(function(){
        if ($('#createdCheckbox').length==0){
        $('<input />').attr('type','checkbox').attr('id','createdCheckbox').insertAfter($(this));
        }
    }); 

Пример jsfiddle

Answer 3

Я думаю, что какой-то версии IE не понравится, что вы добавляете поле динамически. Если вы можете добавить элемент в форму, возможно, вы можете полностью изменить форму и вместо этого внедрить ее как новую форму, используя div.innerHTML или DOM.

И добавьте флажок в исходном HTML как скрытый, и покажите его, если нажата текстовая область.

например:

<div id="msgrapidosinick"><p class="msguser">My Wall</p>
  <form method="post" id="messaggioajaxd" name="frm2">
    <textarea class="areamsgnoava" name="messaggio"></textarea>
    <input type="checkbox" name="checkBox" id="checkBox" style="display:none">
    <input type="hidden" value="1" name="invia" id="invia">
    <input type="hidden" value="1" name="riceve" id="riceve">
    <input type="hidden" value="/assyrian" name="pagina" id="pagina">
    <input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
  </form>
</div>

Тогда, если у вас есть ссылка на узел textarea DOM:

textarea.onfocus = function(ev){
  var ta = ev.target || ev.srcElement;
  ta.form.checkBox.removeAttribute('style');
}

Или используя jQuery и focus.

Answer 4

Никлас побил меня этим, но вот что я собирался предложить ...

Демо: http://jsfiddle.net/wdm954/ppnzf/1/

$('textarea.areamsgnoava').click(function() {
    if ($('input.new').length == 0) {
       $(this).after('<input type="checkbox" class="new" />');
    }
});