纯JS代码实现jquery中html()方法函数

Question

jquery中html()方法函数很好用
$("id").html("插入");
$("id").html();//获取id的innerHTML怎么用纯JS代码实现上面的？
function $(d) {return document.getElementById(d);}.htm()部分怎么仿写？

Answer 1

$("#id").html("插入");
==>document.getElementById("id").innerHTML="插入";
$("#id").html();
==>document.getElementById("id").innerHTML;

Answer 2

仿写html这个方法函数，不是document.getElementById("id").innerHTML="插入"; 

Answer 3

本帖最后由 net_lover 于 2013-04-29 13:03:16 编辑

  

Answer 4

仿写html()这个方法函数
$("divid").html();

Answer 5

Object.prototype.html = function(str) 
{ 
//return this.innerHTML=str; 
} 上面不对，应该如何写？

Answer 6

String.prototype.Trim = function(){ return Trim(this);}即按上面这种仿写出jquery中html()方法函数html function(str) {
return null;
}

Answer 7

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div id="div1">aabb</div>
<script type="text/javascript">
//闭包，防命名污染
(function () {
var xx = window.$= function (d) {
//内建个new 这样直接$也可以使用prototype
if(this==window){
return new xx(d);
} if(d.nodeName){
this.node = d;
}else{
this.node = document.getElementById(d);
}
}
//附加功能
xx.prototype.html=function (t) {
if(t){
this.node.innerHTML= t;
return this;
}
return this.node.innerHTML;
}})();//测试代码
alert($("div1").html());
$("div1").html("我是新来的");
</script>

Answer 8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div id="div1">aabb</div>
<script type="text/javascript">
//闭包，防命名污染
(function () {
var xx = window.$= function (d) {
//内建个new 这样直接$也可以使用prototype
if(this==window){
return new xx(d);
} if(d.nodeName){
this.node = d;
}else{
this.node = document.getElementById(d);
}
}
//附加功能
xx.prototype.html=function (t) {
if(t){
this.node.innerHTML= t;
//链式操作支持
return this;
}
return this.node.innerHTML;
}})();//测试代码
alert($("div1").html());
$("div1").html("我是新来的");
</script>
</body>
</html>

Answer 9

html: function( value ) {
return jQuery.access( this, function( value ) {
var elem = this[0] || {},
i = 0,
l = this.length; if ( value === undefined ) {
return elem.nodeType === 1 ?
elem.innerHTML.replace( rinlinejQuery, "" ) :
null;
}
if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
( jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value ) ) &&
!wrapMap[ ( rtagName.exec( value ) || ["", ""] )[1].toLowerCase() ] ) { value = value.replace( rxhtmlTag, "<$1></$2>" ); try {
for (; i < l; i++ ) {
// Remove element nodes and prevent memory leaks
elem = this[i] || {};
if ( elem.nodeType === 1 ) {
jQuery.cleanData( elem.getElementsByTagName( "*" ) );
elem.innerHTML = value;
}
} elem = 0; // If using innerHTML throws an exception, use the fallback method
} catch(e) {}
} if ( elem ) {
this.empty().append( value );
}
}, null, value, arguments.length );
},

Answer 10

仿写html()这个方法函数
$("divid").html();
直接去翻jquery代码去

Answer 11

jquery代码html: function(E) {
            return E === g ? (this[0] ? this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g, "") : null) : this.empty().append(E)
        }想用纯JS实现上面jquery这个html()方法函数

Answer 12

你是想找一个小于10K的框架吗？还是想学习jquery源码？

Answer 13

想用纯JS实现上面jquery这个html()方法函数 

Answer 14

上面把原理方法都说了很多了，你不会自己包装一下？function $(id){
    var dom = document.getElementById(id);
    var result = {
        html:function(str){
            if(typeof str == 'string') {
                dom.innerHTML = str;
                return str;
            } else 
                return dom.innerHTML;
        }
    }
    return result;
}使用：
$('divid').html('1234');

Answer 15

innerHTML和jquery的html()似乎在包含script标签的时候处理不一样，一个会阻塞，一个不会阻塞

Answer 16

jquery是将script抽出来执行了。

Answer 17

$("divid").innerHTML这样就没法用了

Answer 18

$("divid").innerHTML这样就没法用了你不是要仿jq吗？难道jq可以 $("divid").innerHTML?

Answer 19

lz，你就去扩展HTMLElement的prototype吧!!感觉大家都要被你折腾坏了！
function $(d) {return document.getElementById(d);}HTMLElement.prototype.html = function(str){
    if(typeof str === 'string') {
        this.innerHTML = str;
        return this;
    } else { 
        return this.innerHTML;
    }
}$("id").html()

Answer 20

IE下 xx.innerHTML 是只读的，要是你想写成 xx.innerHTML = '<strong>好像不行哦。</strong>';