Jquery关于HTML()方法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery关于HTML()方法相关的知识，希望对你有一定的参考价值。

<script>
$(document).ready(function()
$('button').click(function()
$('div#n').html('<h2>ddddd</h2>');
);
);

</script>
<body>
<div id="n" style="background:#C60">
aaaaaaaaaaaaaaaaaaaaaaaa

</div>
<button>点击这里会变</button>

那个 HTML()方法 是把DIV变成了<h2>标签了吗
但为什么里面的 style 背景颜色 还是有
点击完button之后的代码是什么那既然 会在div标签中 添加h2
那要after 干什么? after()方法不就是在xxx之后添加 新的文本吗?

参考技术A 多看文档..
html是操作元素innerHTML属性, 直接操作这个属性会导致元素内部所有元素的事件绑定被清除
比如
$('div').append($('<span>').html('test').click(function()alert('Click')))
$('div').html($('div').html())
然後span上绑定的click事件就没了

after是在元素的同级到後面添加新元素
<div id="outer">
<div id="inner"></div>
</div>
$('#inner').after('<span>')

能把一个标签替换成另一个标签的是
replaceAll和replaceWith
html并不会把<div>变成<h2>本回答被提问者和网友采纳

关于HTML element和JavaScript/jQuery object的一些区别

最近在调用HTML canvas的getContext("2d")的方法时，发现使用js的document.createElement("canvas")构造的canvas可以直接调用，而使用jQuery constructor $("<canvas>")构造出来的canvas需要canvas[0].getContext("2d")来调用

了解了一下HTML element和js/jQuery object的一些区别，原来发现使用document.createElement构造的是DOM element，ex:<div>, <a> 但是使用jQuery constructor构造的是一个新的object(container)，看成一个array，array里包含了element，下面是console.log()得到两者的区别：

技术分享图片

发现自己好多都是直接Hack拿来用，有些地方都没整明白，还有很多需要学习的地方

 

参考：

https://www.quora.com/What-is-the-difference-between-a-raw-DOM-element-and-a-JavaScript-jQuery-object

https://stackoverflow.com/questions/6942193/whats-the-difference-between-a-jquery-object-and-a-dom-element-difference-betw

 

以上是关于Jquery关于HTML()方法的主要内容，如果未能解决你的问题，请参考以下文章

jquery-2.0.2 关于attr方法的问题

关于JQuery animate()方法

jQuery关于隐式迭代的个人理解~

前端关于jquery一些总结

JQuery系列 | html()和text()方法的用法和区别

jQuery异步框架探究2:jQuery.Deferred方法