GVKun编程网logo

jQuery .html() 与 .append()

7

最近很多小伙伴都在问jQuery.html()与.append()这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展ajax–jQuery.append(html)命令附加不正确、A

最近很多小伙伴都在问jQuery .html() 与 .append()这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展ajax – jQuery .append(html)命令附加不正确、Angularjs jqlite append()和jquery append()的行为与、append和appendTo的区别以及appendChild用法_jquery、innerHTML与jquery里的html()区别介绍_jquery等相关知识，下面开始了哦！

本文目录一览：

jQuery .html() 与 .append()

jQuery .html() 与 .append()

假设我有一个空的 div：

<div id=''myDiv''></div>

这是：

$(''#myDiv'').html("<div id=''mySecondDiv''></div>");

与以下相同：

var mySecondDiv=$("<div id=''mySecondDiv''></div>");$(''#myDiv'').append(mySecondDiv);

答案1

小编典典

每当您将 HTML 字符串传递给任何 jQuery 方法时，都会发生以下情况：

创建了一个临时元素，我们称之为 x。x’sinnerHTML设置为您传递的 HTML 字符串。然后 jQuery 会将每个生成的节点（即 x’s
childNodes）转移到新创建的文档片段中，然后将其缓存以备下次使用。然后它将片段childNodes作为新的 DOM 集合返回。

请注意，它实际上比这要复杂得多，因为 jQuery
做了一堆跨浏览器检查和各种其他优化。例如，如果您只传递<div></div>给jQuery()，jQuery
将采取捷径并简单地执行document.createElement(''div'').

编辑 ：要查看 jQuery
执行的大量检查，请查看此处、此处和此处。

innerHTML通常 是 更快的方法，尽管不要让它一直支配你的工作。jQuery 的方法并不element.innerHTML =...像我提到的那样简单——发生了一堆检查和优化。

正确的技术在很大程度上取决于具体情况。如果你想创建大量相同的元素，那么你要做的最后一件事就是创建一个巨大的循环，在每次迭代时创建一个新的 jQuery
对象。例如，使用 jQuery 创建 100 个 div 的最快方法：

jQuery(Array(101).join(''<div></div>''));

还需要考虑可读性和维护问题。

这：

$(''<div id="'' + someID + ''">'' + content + ''</div>'');

… 比 这更难维护：

$(''<div/>'', {    id: someID,    className: ''foobar'',    html: content});

ajax – jQuery .append(html)命令附加不正确

ajax – jQuery .append(html)命令附加不正确

我正在使用jQuery / Ajax调用将部分视图附加到表.页面加载时,将正确创建局部视图.但是,一旦使用尝试将另一个项目附加到表格,尽管使用了完全相同的局部视图,但格式化仍然不正确.

这是表格.加载时,项目将正确加载到页面上,如下图所示：

<table id="fixedRows">
     <thead>
        <tr>
           <th>State Code</th>
           <th>Agent ID</th>
           <th></th>
           <th></th>
        </tr>
    </thead>
    <tbody>    
    @foreach (var item in Model.BankListAgentId)
    {                    
        if (!String.IsNullOrWhiteSpace(item.AgentId) && item.FixedOrVariable.Equals("F"))
        {
            @Html.EditorFor(model => item,"FixedPartialView")                     
        }
    }
</tbody>
</table>
<br />
<a href="#">Add Another</a>

单击“添加另一个链接”后,将激活此jQuery / Ajax调用

<script type="text/javascript">
    $(document).ready(function () {

        $(".addFixed").click(function () {
            //alert('test');
            event.preventDefault();        
            $.ajax({
                url: '@Url.Action("BlankFixedRow","BankListMaster")',cache: false,success: function (html) { $("#fixedRows").append(html); }
            });
        });

        $("#addVariable").click(function () {
            event.preventDefault();
            $.ajax({
                url: '@Url.Action("BlankFixedRow",success: function (html) { $("#variableRows").append(html); }
            });
        });

    });


</script>

那个jQuery从控制器调用这个方法

public ViewResult BlankFixedRow()
    {
        SelectList tmpList = new SelectList(new[] { "AL","AK","AS","AZ","AR","CA","CO","CT","DE","DC","FM","FL","GA","GU","HI","ID","IL","IN","IA","KS","KY","LA","ME","MH","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NA","NM","NY","NC","ND","MP","OH","OK","OR","PW","PA","PR","RI","SC","SD","TN","TX","UT","US","VT","VI","VA","WA","WV","WI","WY" });
        ViewBag.StateCodeList = tmpList;

        return View("FixedPartialView",new BankListAgentId());
    }

这称之为局部视图
编辑(有几个人注意到< tr>中缺少id标记,这只是这篇文章的复制/粘贴错误,实际代码有id标记)

@model Monet.Models.BankListAgentId

@{
    Layout = null;
}
    @using (Html.BeginCollectionItem("BankListAgentId"))
    {
        <tr id="item-@Model.AgentId">
            <td>
                @Html.DropDownListFor(model => model.StateCode,(SelectList)ViewBag.StateCodeList,Model.StateCode)
            </td>
            <td>
                @Html.EditorFor(model => model.AgentId)
                @Html.ValidationMessageFor(model => model.AgentId)
            </td>
            <td>
                <a href="#">delete</a>
            </td>
            @*<td><a href="#" onclick="$('#item-@Model.AgentId').parent().remove();">Delete</a></td>*@
        </tr>
    }

这是与页面首次加载时调用的局部视图相同,这部分原因让我感到困惑的是,在点击添加另一个链接后最终结果看起来像这样

编辑

如果您点击两次添加另一个链接,则结果如此

编辑

我已经尝试了以下jQuery成功命令,没有运气

success: function (html) { $("#fixedRows > tbody:last").append(html); }
success: function (html) { $("#fixedRows tr:last").after(html); }
success: function (html) { $("#fixedRows  > tbody").append(html); }

这是在单击添加另一个链接后呈现的HTML.我包括了开头< form>标记下面的表单,以显示无法找到新行.

<form action="/BankListMaster/Edit/11" method="post">        
    <fieldset>
        <legend>Stat(s) Fixed</legend>
        <table id="fixedRows">
            <tr>
                <th>State Code</th>
                <th>Agent ID</th>
                <th></th>
                <th></th>
            </tr>

            <tr id="item-1164998320">
                <td>
                    <select id="item_StateCode" name="item.StateCode"><option value="">HI</option>
                        <option>AL</option>
                        ..
                        <option>WY</option>
                    </select>
                </td>
                <td>
                    <inputhttps://www.jb51.cc/tag/Box/" target="_blank">Box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998320" />
                    <spandata-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
                </td>
                <td>
                    <a href="#">delete</a>
                </td>
            </tr>    
            <tr id="item-1164998219">
                <td>
                    <select id="item_StateCode" name="item.StateCode">
                        <option value="">HI</option>
                        <option>AL</option>
                        ..
                        <option>WY</option>
                    </select>
                </td>
                <td>
                    <inputhttps://www.jb51.cc/tag/Box/" target="_blank">Box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998219" />
                    <spandata-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
                </td>
                <td>
                    <a href="#">delete</a>
                </td>
            </tr>    
            <tr id="item-0352926603">
                <td>
                    <select id="item_StateCode" name="item.StateCode">
                        <option value="">GA</option>
                        <option>AL</option>
                        ..
                        <option>WY</option>
                    </select>
                </td>
                <td>
                    <inputhttps://www.jb51.cc/tag/Box/" target="_blank">Box single-line" id="item_AgentId" name="item.AgentId" type="text" value="0352926603" />
                    <spandata-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
                </td>
                <td>
                    <a href="#">delete</a>
                </td>
            </tr>            
        </table>
        <br />
        <a href="#">Add Another</a>
    </fieldset>
</form>     
<a href="#">Add Another</a>
<form action="/BankListMaster/Edit/11" method="post">

编辑

这是在单击Add Another链接后Chrome浏览器中表格的屏幕截图.如您所见,从表中提取的数据在相应的< tr>中正确加载.标签,但是空行(通过与其余部分相同的局部视图发送)没有任何相同的表元素.下面的屏幕截图显示了响应,但其中包括< tr>标签

编辑

我在成功的Ajax函数中放了一个console.log(html)行,现在它就读了

success: function (html) {
                console.log(html);
                $("#fixedRows > tbody").append(html);
            }

这是控制台输出(为便于阅读而编辑的状态)

<input type="hidden" name="BankListAgentId.index" autocomplete="off" value="3f7e0a92-8f20-4350-a188-0725919f9558" />
        <tr>
            <td>
                <select id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__StateCode" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].StateCode">
                    <option>AL</option>
                    ..
                    <option>WY</option>
                </select>
            </td>
            <td>
                <inputhttps://www.jb51.cc/tag/Box/" target="_blank">Box single-line" id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__AgentId" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].AgentId" type="text" value="" />                 
            </td>
            <td>
                <a href="javascript:void(0)">delete</a>
            </td>               
        </tr>

解决方法

真是个彻头彻尾的噩梦……

首先,在Chrome的调试器中返回的HTML是可以的,但是当我点击页面的“查看源代码”时,除了最初加载的内容之外,我看不到任何内容.找到this post后,我发现这是正常的.然后我用this Chrome add-on最终看到< tr>和< td>标签被剥离了.只需在append语句中添加一个开始和结束标记,我就会将返回的项目附加到表中.

$(".addFixed").click(function () {
        $.ajax({
            url: '@Url.Action("BlankFixedRow",dataType: 'html',success: function (html) {
                $("#fixedRows > tbody").append('<tr>' + html + '</tr>');
            }
        });
    });

Angularjs jqlite append()和jquery append()的行为与

Angularjs jqlite append()和jquery append()的行为与

我正在尝试将一些元素添加到a中,当使用内置的jqlite和使用 jquery时,我会看到一些不同的行为.我创造了一个小提琴来展示它的不同之处： http://jsfiddle.net/waylon999/5fyBt/1/

它看起来像我这样做：

element.append('<td>Val 1</td><td>Val 2</td>'); // jqlite

在插入字符串之前剥离标记.但是,当我尝试

$(element).append('<td>Val 1</td><td>Val 2</td>');

它按照我的预期工作,其中append中的整个字符串arg附加到标记.我尝试了几件事,包括

angular.element(element).append(....)

但我找不到办法让它发挥作用.有什么我不明白这应该如何工作？

谢谢！

解决方法

我可以说,这是JQLite中的一个错误： 

function JQLite(element) {

    ...

    if (isstring(element)) {
        var div = document.createElement('div');
        // Read about the NoScope elements here:
        // http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
        div.innerHTML = '<div>&#160;</div>' + element; // IE insanity to make NoScope elements work!
        div.removeChild(div.firstChild); // remove the superfluous div
        JQLiteAddNodes(this,div.childNodes);
        this.remove(); // detach the elements from the temporary DOM div.
    } else {
        JQLiteAddNodes(this,element);
    }
}

你可能知道或不知道,你不能这样做：

div.innerHTML = '<div></div><td>asdf</td>';

td将被删除.我猜jQuery不会做同样的事情(也许他们不关心NoScope？).也就是说,如果你想继续使用Angular,这很好用：

element[0].innerHTML += '<td>Val 1xx</td><td>Val 2yy</td>';

我建议在Angular的github上提交一个问题.

append和appendTo的区别以及appendChild用法_jquery

append和appendTo的区别以及appendChild用法_jquery

append()前面是要选择的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容且为Jquery对象，而后面是要选择的对象

实例：
$(''#a'').append(''content'');
$(''

content
'').appendTo($(''#a''));

注意appendTo前面一定要是Jquery对象。

appendChild(Node)这个 方法一般是在指定元素节点的最后一个子节点之后添加节点

但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接Move节点。

appendChild你可以理解为移动一个元素。如果想复制一份过去，要事先clone

innerHTML与jquery里的html()区别介绍_jquery

innerHTML与jquery里的html()区别介绍_jquery

看个示例：

复制代码 代码如下:

var tbody=document.createElement(''tbody'');
tbody.innerHTML=''IE下tbody的innerHTML是只读的''; //在IE下报错，目标对象错误


现在用jquery的html试试，
复制代码 代码如下:

$(tbody).html(''IE下tbody的innerHTML是只读的'');

发现IE下用jquery能正确显示了，没任何问题。
后来查阅资料才知道，原来IE下tbody、tr这些的innerHTML都是只读的，不允许写入，而在其他浏览器下则没问题。

而jquery里是用了try，catch来检测，如果报错则在catch里重新调用this.empty().append(value)，是通过append来添加字符串的。

jquery 如何使用innerHTML

$("#responsediv") 是个Jquery对象，它Val()是对Value属性赋值对它无意义，Jquery没有innerHTML这个属性，应该这样写$("#responsediv")[0].innerHTML=msg 就可以获得这个Dom对象使用innerHTML。

今天在这个基础上加上了一个后加载广告的方法：

代码如下：

<div id="logo_m"></div>
<script>
function doad(datastr,id){ 
//getid(id).innerHTML = datastr; 这个是原生js的写法
$("#"+id).html(datastr); //这个是jquery写法
}
/*
上面的都是直接的字符串写入，不能是js代码
下面的代码利用的是jquery的append加载google广告不错，百度的好像不能用。后加载百度的可以是用百度管家自带的函数。
*/
function doad2(datastr,id){ 
$("#"+id).append(datastr);
}

var logo_m=''<a href="http://www.danhw.com/" target="_blank"><img  src="http://files.jb51.net/image/kongbao_370.gif"innerHTML与jquery里的html()区别介绍_jquery" ></a>'';
doad(logo_m,''logo_m'');
</script>
登录后复制

百度管家自带的后加载广告的代码，基于jquery

<div id="tonglanbd"></div>
<script type="text/javascript">
$.getScript("http://cbjs.baidu.com/js/m.js", function() {
BAIDU_CLB_fillSlotAsync("广告id，不能带u","tonglanbd");
});
</script>
登录后复制

关于jQuery .html() 与 .append()的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于ajax – jQuery .append(html)命令附加不正确、Angularjs jqlite append()和jquery append()的行为与、append和appendTo的区别以及appendChild用法_jquery、innerHTML与jquery里的html()区别介绍_jquery等相关内容，可以在本站寻找。

本文标签：

上一篇Java Hibernate:hbm2dl.auto=在生产中更新？（java update更新）

下一篇to_string 不是 std 的成员，g++ (mingw) 说（to_string is not a member of std）

相关文章