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

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)">

演示:

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

function doit(e) {
  e.preventDefault();
  $('#item2').text(function(i, oldtext) {
    return oldtext + $("form[name=name_form] input[name=fname]").val() + "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(event)">
      <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>

实际上，你的append()确实有效。您的 fiddle 有两个问题:

1. 您有onLoad已选择。这会导致所有代码都位于 window.onload 内。函数，因此它不在全局范围内，而这是 onsubmit 中使用的函数所需要的属性。使用No wrap修复了这个问题。

2. 您没有阻止默认提交。除了我上面这样做的方式之外，您还可以通过简单地返回 false 来完成此操作。在 onsubmit :

   onsubmit="doit(); return false;"
   

演示:

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(); return false">
      <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>