Javascript jQuery附加删除标记_Javascript_Jquery_Html_Append

Javascript jQuery附加删除标记

javascript jquery html

Javascript jQuery附加删除标记,javascript,jquery,html,append,Javascript,Jquery,Html,Append,我尝试使用jqueryappend方法，但它删除了我想要附加的html代码的标记（tr，td）。为什么要删除这些，我如何强制这个方法只是附加而不是分析我的代码下面是一个示例文件 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script type="text/javascr

我尝试使用jqueryappend方法，但它删除了我想要附加的html代码的标记（tr，td）。为什么要删除这些，我如何强制这个方法只是附加而不是分析我的代码

下面是一个示例文件

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">    </script>
<script type="text/javascript">
$(document).on('click', '#button1', function () {
var htmlAppend = '';
htmlAppend = htmlAppend + '<input type="hidden" name="content0" value="' + 'hiddenvalues' + '"/>' + '<tr>' + 
    '<td>' + 'content1' + '</td>' + 
    '<td>' + 'content2' + '</td>' + 
    '<td>' + 'content3' + '</td>' + 
    '<td><input style="width: 300px" type="text" name="content4"/></td>' +
'</tr>';                   
$("#ScenarioCompetenceRatings").append(htmlAppend);
});
</script>
</head>
<body>
<button id="button1">Add Row</button>
<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th style="width: 300px">Column4</th>
        </tr>
    </thead>
    <tbody id="ScenarioCompetenceRatings">

    </tbody>
</table>


$（文档）.on（'单击'，'按钮1'，函数（）{
var htmlAppend=''；
htmlAppend=htmlAppend+'+'''+
“+”内容1“+”+
“+”内容2“+”
“+”内容3“+”
'' +
'';                   
$（“#场景竞争力”）.append（htmlapend）；
});
添加行
专栏1
专栏2
第3栏
专栏4

您正在生成无效的标记。您应该将隐藏的

input

元素放入

td

元素中

tbody

元素只能有

tr

子元素

这就是您想要构建的吗？查看我创建的小提琴

在此处输入代码

要查看我的小提琴，请您告诉我在哪里好吗？；）