将表单输入实时附加到 HTML 字符串

Question

我想为我的表单的问题二（和其他后续问题）获取标题，以根据在问题中输入的内容进行更新几个解决方案 SO 向我展示了我没有管理。非常感谢任何帮助！这是我最新的迭代：

我的 HTML：

<input type="text" class="form-control" placeholder="Dexter" name="name" style="background-color:#DFECF5;" required data-validation-required-message="Please enter your pet's name.">...

<h3>What Breed is<div id="namer"></div></h3>

我的 JS：

$(document).ready(function () {
    $('<input name="name" type="text"/>').appendTo("div.namer");
});

编辑

我已经学会了 JS Angular，它在几秒钟内就为我解决了这个问题 :)

<div ng-app="">

<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p> 

</div>

Answer 1

试试这个..

      <input type="text" class="form-control dexter" placeholder="Dexter" name="name" style="background-color:#DFECF5;" required data-validation-required-message="Please enter your pet's name."/>

        <h3>What Breed is <div class="namer"></div></h3>
         <script>
    $(document).ready(function(){
        $(".dexter").blur(function(){
var dextervalue=$(".dexter").val();
$(".breed").remove();
$('<input name="name" class="breed" type="text" value"'+dextervalue+'"/>').appendTo("div.namer");
$(".breed").val(dextervalue);
        });

    });
    </script>

小提琴：http://jsfiddle.net/cq3moa34/