jQuery - 将文本从输入字段发送到带有预定文本的 div

Question

最好使用 jquery id 希望通过单击按钮将输入字段中的书面文本更新为 div。

另外，当发生这种情况时，就像该文本周围有一个预先定义的特定文本
“书面文字”
“以及预先写好的文本定义的文本”

另一方面，我在写这篇文章时我想到了......像 stackoverflow 中的这篇文章预览这样的东西也不会太糟糕。因为单击按钮后显示文本并不重要。当然..哪种方式会更容易..这就是我会选择的方式...

有什么想法吗？我在谷歌上搜索了我的屁股，但我想我找不到正确的搜索词来描述使用 jquery 将文本从输入字段发送到 div...

就实际功能而言，我真的没有起点，但这里的输入和 div 是至少。 http://jsfiddle.net/XrBy2/2/

Answer 1

UPDATE

    $(document).ready(function() {

        $('input[type=button]').click(
            function (){update(); }
        );

$('input.clear').click(
        function(){
            $('div.update-here').html("");
        }     
    )

    });

并为清除按钮提供类清除

<script src="jquery.js"></script>

<script type="text/javascript">

    var textfront = "some pre defined text";

    var textend = "some pre defined text back";

    $(document).ready(function() {

        $('input[type=button]').click(
            function (){update(); }
        );

    });

    function update()
    {
        $('div.update-here').html(textfront+$('#inputform').val()+textend);
    }

UPDATE 在此处更改

$('div.update-here').html(textfront+$('#inputform').val()+textend);

$('div.update-here').html(textfront+$('input[name=update]').val()+textend);
</script>

<div class="update">
  <p>Update:</p>

  <input type="text" name="update" id="inputform"/>
  <input type="button" value="update"/>
</div>

<div class="update-here"></div>

<div style="margin: 0px;" class="example">written text</div>
<div class="example">AND THE PRE written DETERMINED TEXT</div>

Answer 2

这是添加了清除按钮及其功能的最终版本。

http://jsfiddle.net/XrBy2/13/

js

<script type="text/javascript">
    var textfront = "front-";

    var textend = "-back";

    $(document).ready(function() {

        $('.update').click(
            function (){update(); }
        );
        $('.clear').click(
              function (){clear(); }
        );

    });

    function update()
    {
        $('div.update-here').html(textfront+$('.update-it input').val()+textend);
    }
    function clear()
    {
        $('div.update-here').html($(''));
    }
</script>

html

<div class="update-it">
  <p>Update:</p>
  <input type="text" name="update" /><input class="update" type="button" value="update" /><input class="clear" type="button" value="clear" />
</div>

<div class="update-here"></div>

和相关 css

.body { font-size: 12px;}

.update-it { border: 1px solid #e1e1e1; padding: 4px 7px 4px 4px; width: 150px; }
.update-it input { width: 100%; }

.example, .update-here { background: #f1f1f1; margin-top: 30px; border: 1px solid #999; padding: 4px 7px 4px 4px; height: 10px; line-height: 10px; }