追加不适用于将文本追加到元素

Question

类似于此问题：jQuery append fadeIn

但是该解决方案不适用于我。

基本上是尝试询问用户其姓名，然后在下面添加问候语。最好是在淡入淡出时，我尝试了一些我在这里遇到的解决方案，但无济于事。

当在警报内调用时，“ document.name_form..etc）也可以正常工作。

谁能看到我要去哪里了吗？

function doit() {
    $('#item2').append( document.name_form.fname.value +"U WOT");  
}

（函数doit从html表单“ onSubmit”触发，并成功触发了警报等）

代码段：

var greeting = "hello "
var div = document.getElementById('#item2');

function doit() {
  $('#item2').append(document.name_form.fname.value + "U WOT");
}


// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE "  + document.name_form.fname.value).appendTo($( " #item2 " ));	
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;

/***************************/


/*****CONTAINER STYLES******/


/***************************/

body {
  background-color: #212130;
}

#container {
  font-family: 'Exo 2', sans-serif;
  color: #c5c520;
  font-weight: 300;
  width: 100%;
  min-width: 225px;
  max-width: 325px;
}


/***************************/


/*******INPUT STYLES********/


/***************************/

.input {
  height: 25px;
  width: 100%;
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #c5c520;
  outline: 0;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
  -webkit-transition: box-shadow 0.2s;
  -o-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
  font-family: 'Exo 2', sans-serif;
  color: #c5c520;
  font-weight: 300;
}

.input:hover {
  box-shadow: inset 0 -10px 20px -10px #131322;
  -moz-box-shadow: inset 0 -10px 20px -10px #131322;
  -webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
  border-left-color: #181825;
  border-right-color: #181825;
}

.input:focus {
  background-color: #191929;
}

.name_submit {
  color: #181825;
  background-color: #c5c520;
  border: none;
}

.submit_btn {
  display: none;
}

.question {
  display: block;
  bottom: 15px;
}


/***********************************/


/*******ITEM SPECIFIC STYLES********/


/***********************************/

#item1 {
  display: block;
}

#item2 {
  top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">


  <!-- WHAT IS YOUR NAME -->

  <div class="question" id="item1">
    <div class="text">
      <p>
        Before we get started, what is your name?
      </p>
    </div>
    <form name="name_form" action="" onSubmit="doit()">
      <input type="text" class="input" name="fname">
      <p></p>
      <input type="button" value="Submit" class="submit_btn">
    </form>
  </div>

  <!-- GREETING RE NAME -->
  <div class="question" id="item2">
    HI THERE
  </div>



</div>

Answer 1

.append()应该用于添加新的DOM元素。要将文本添加到现有元素，请使用.text。

function doit(e) {
    e.preventDefault();
    $('#item2').text( function(i, oldtext) {
        return oldtext + $("form[name=name_form] input[name=fname]").val()+"U WOT";
    });
}

您还必须使用preventDefault()来阻止提交表单。为此，我将<form>更改为：

<form name="name_form" action="" onSubmit="doit(event)">

DEMO

实际上，您的append()确实有效。你的小提琴有两个问题：

1. 您已选择onLoad。这导致所有代码都在window.onload函数内部，因此它不在全局范围内，这对于onsubmit属性中使用的函数而言是必需的。使用No wrap解决此问题。

2. 您并没有阻止默认提交。除了上述操作之外，您还可以通过简单地在false中返回onsubmit来完成此操作：

   onsubmit="doit(); return false;"
   

DEMO

Answer 2

我认为问题在于绑定onsubmit时功能doit不可用。

您可以尝试像变量一样声明doit：

doit = function(){

http://jsfiddle.net/otnn848g/2/

顺便说一句，如果您不想真正提交表单，可以绑定onclick而不是onsubmit