Как создать элементы формы, используя jquery

Мой код

    <!DOCTYPE html>
    <html>
    <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">                  </script>
    <script>
    function afterText() {
        var txt3 = document.createElement("b");   
        txt3.innerHTML = $("<input/>", {
        type: 'text',
        id: 'vname',
        name: 'name',
        placeholder: 'Your Name'
     });
     $("img").after(txt3);      
    }
    </script>
     </head>
  <body>
    <img src="/images/home.gif" alt="home" width="100" height="140">
    <button onclick="afterText()">click</button>
  </body>
  </html>

Вывод, который я получил, - [Object Object]. Но как я могу добавить поле ввода (не следует использовать "Добавить").

1 ответ

Решение

Для манипуляций с DOM нет необходимости смешивать подходы jQuery и чистый JavaScript.

Просто используйте следующее:

 $('<div>' +
     '<input type="text" id="vname" name="name" placeholder="Your Name">' +
   '</div>').insertAfter('img');

Или, если вам нужно более продвинутое:

 $('<div>').append($('<input>', {
    type: 'text',
    id: 'vname',
    name: 'name',
    placeholder: 'Your Name'
 })).insertAfter('img');
Другие вопросы по тегам