为什么append（）不使用输入标记？

Question

我想在提交按钮的值后添加<i>Some Text</i>。如果我像在代码片段中一样在HTML中编写它，它可以工作，但如果我使用jQuery追加它部分工作。

部分我的意思是，如果你打开开发人员工具，附加文本会出现，但它不会显示在浏览器屏幕上。

为什么会这样？

$(document).ready(function(){
  $('.tryout').append('<i>Hello</i>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input class="tryout" type="submit"></input>

<hr>

<input type="submit"><i>Hello</i></input>

Answer 1

您不能将任何内容附加到输入元素，而是使用按钮

$(document).ready(function() {
  $('.tryout').append('<i>Hello</i>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button class="tryout" type="submit"></button>

<hr>

<button type="submit"><i>Hello</i></button>

或者，如果您愿意，可以使用。$('.tryout').after('<i>Hello</i>');

等.after（）将新元素作为按钮的兄弟插入

Answer 2

您需要使用.after代替.append()来追加元素之后的元素：

  

在匹配元素集合中的每个元素之后插入由参数指定的内容。

 $('.tryout').after('<i>Hello</i>');