jquery在input元素旁边添加一个元素

时间:2015-04-08 07:53:40

标签: javascript jquery html

我有这个html输入。

<input type='text' class='req-in' name='fname'>
<input type='text' class='req-in' name='lname'>

我正在尝试在输入字段旁边添加somr元素。我尝试了append()prepend(),但它出错了。

这是我的代码:

$('.req-in').blur(function() {
        $(this).append('<p>some text here for this field only!</p>');   
    });
这可能吗?我理想的输出就像这样

<input type='text' class='req-in' name='fname'><p>some text here for this field only!</p>
<input type='text' class='req-in' name='lname'>

2 个答案:

答案 0 :(得分:4)

您需要使用.after()方法。

  

在匹配元素集合中的每个元素之后插入由参数指定的内容。

$('.req-in').blur(function() {
    $(this).after('<p>some text here for this field only!</p>');   
});

.insertAfter()

  

在目标之后插入匹配元素集中的每个元素。

$('.req-in').blur(function() {
 $('<p>some text here for this field only!</p>').insertAfter($(this));
});

答案 1 :(得分:0)

试试这个

    <!DOCTYPE html>
<html>
<title>Stack HTML</title>
<link rel="stylesheet" href="../repo/css/bootstrap.css" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="../repo/js/bootstrap.js"></script>
<script src="../repo/js/jquery.validate.js"></script>
<head></head>
<body>

    <input type='text' class='req-in' name='fname'>
    <input type='text' class='req-in' name='lname'>

    <script>
        $(document.body).on('blur', '.req-in' ,function(){
            $(this).after('<p>some text here for this field only!</p>');
        });
    </script>
</body>
</html>