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

Append does not work for appending text to an element

本文关键字：追加 元素 文本 不适用 适用于      更新时间：2023-09-26

类似于这个问题：jQuery 追加淡入

但是解决方案对我不起作用。

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

"document.name_form..等）在警报中调用时也可以正常工作。

谁能看出我哪里出了问题？

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>

.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()确实有效。你的小提琴有两个问题：

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

  2. 您没有阻止默认提交。除了我上面执行此操作的方式之外，您还可以通过在onsubmit中简单地返回false来做到这一点：

    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>

我认为

问题是当您在提交时绑定时函数 doit 不可用。

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

doit = function(){

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

代码片段：

var greeting = "hello "
var div = document.getElementById('#item2');
doit = function() {
  $('#item2').append(document.name_form.fname.value + "U WOT");
  return false;
}
// 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>

相关文章：