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

【问题标题】：Append does not work for appending text to an element附加不适用于将文本附加到元素
【发布时间】：2025-12-06 01:35:01
【问题描述】：

类似于这个问题： jQuery append fadeIn

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

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

“document.name_form..etc”在警报中调用时也能正常工作。

谁能看出我哪里出错了？

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

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

代码sn-p：

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>

【问题讨论】：

    标签： javascript jquery html append


    【解决方案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() 来防止表单被提交。为了匹配这一点，我将&lt;form&gt; 更改为：

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

    【讨论】：

    • 好吧 append 也可以用来添加文本节点。
    • 是的，但是你必须实际创建一个文本节点。如果参数是一个字符串，如果它以标签开头，则将其解析为 HTML，否则将其视为选择器。
    【解决方案2】：

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

    您可以尝试将 doit 声明为变量：

    doit = function(){

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

    代码sn-p：

    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>

    【讨论】：

    • 他所要做的就是将菜单中的“onLoad”更改为“No Wrap”
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript C# Mysql Docker 算法 前端 SpringBoot Redis Vue spring .net 设计模式 .net core c++ kubernetes 数据库 机器学习 大数据 数据结构 微服务 js 人工智能 Go Android 面试 程序员 JVM 云原生 后端 ASP.net core 深度学习 CSS k8s git golang PHP devops Nginx Django React mybatis 架构 多线程 Spring Boot 云计算 LeetCode 分布式